/***
 *
 * Single Product Styles
 * Improved: transitions, accessibility, consistency, cross-browser fixes
 *
*/

/* =============================================
   Local Custom Properties (lebih mudah dikelola)
   ============================================= */
:root {
  --sp-border-color: rgba(168, 168, 168, 0.5);
  --sp-border-radius-sm: 5px;
  --sp-border-radius-md: 8px;
  --sp-transition: 0.2s ease;
  --sp-avatar-size: 48px;
}

/* =============================================
   Single Product — Layout & Images
   ============================================= */
.woo-single .wc-block-product-gallery-large-image img {
  object-fit: cover;
  transition: transform 0.4s ease;
}

.woo-single .wc-block-product-gallery-large-image img:hover {
  transform: scale(1.015);
}

.single-img
  .wp-container-woocommerce-product-gallery-large-image-next-previous-is-layout-1 {
  align-items: center;
}

/* =============================================
   Responsive — Mobile
   ============================================= */
@media (max-width: 480px) {
  :where(.wc-block-product-gallery-thumbnails__scrollable) {
    justify-content: center;
  }
}

/* =============================================
   Review Link
   ============================================= */
a.woocommerce-review-link {
  color: var(--wp--preset--color--accent);
  transition: opacity var(--sp-transition);
}

a.woocommerce-review-link:hover {
  opacity: 0.75;
}

/* =============================================
   Cart Form
   ============================================= */
.btn-like {
  display: inline-flex;
}

.woo-single form.cart,
.woo-single .variations_button {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
}

.woo-single .quantity {
  margin-right: 0 !important;
}

.woo-single form.cart div.quantity .qty {
  background-color: var(--wp--preset--color--base-2);
  padding: 10px !important;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
  margin-right: 0 !important;
  border: 1px solid var(--sp-border-color);
  border-radius: var(--sp-border-radius-sm);
  transition: border-color var(--sp-transition), box-shadow var(--sp-transition);
}

.woo-single form.cart div.quantity .qty:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
}

.woo-single form.grouped_form div.quantity .qty {
  width: 50px !important;
}

/* Quantity selector buttons */
.wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__button {
  background-color: var(--wp--preset--color--base-2);
  transition: background-color var(--sp-transition);
}

.wc-block-components-quantity-selector
  .wc-block-components-quantity-selector__button:hover {
  background-color: var(--wp--preset--color--base-3);
}

/* Add to Cart Button */
.woo-single button.single_add_to_cart_button.button.alt.wp-element-button {
  border: 1px solid var(--sp-border-color);
  border-radius: var(--sp-border-radius-md);
  transition: transform var(--sp-transition), box-shadow var(--sp-transition), opacity var(--sp-transition);
  cursor: pointer;
}

.woo-single button.single_add_to_cart_button.button.alt.wp-element-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.woo-single button.single_add_to_cart_button.button.alt.wp-element-button:active {
  transform: translateY(0);
  box-shadow: none;
}

.woo-single button.single_add_to_cart_button.button.alt.wp-element-button:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
}

/* Cart form layout overrides */
.woo-single
  .wp-block-woocommerce-add-to-cart-form
  .variations_button
  > .single_add_to_cart_button,
.woo-single
  .wp-block-woocommerce-add-to-cart-form
  form.cart
  > .single_add_to_cart_button {
  justify-self: unset;
  margin-top: 8px !important;
}

.woo-single
  .wp-block-woocommerce-add-to-cart-form
  .variations_button
  > .quantity {
  justify-self: unset;
  grid-column: var(--whole-width-in-grid);
}

.woo-single
  .wp-block-woocommerce-add-to-cart-form
  .variations_button
  > .quantity:not(.wc-block-components-quantity-selector)
  .qty {
  height: auto;
}

/* =============================================
   Variation Price & Table
   ============================================= */
.woo-single .woocommerce-variation-price {
  font-size: 27px;
  font-weight: 500;
}

.woo-single table.variations {
  margin-bottom: 0.5em !important;
}

.woo-single form.cart table.variations th {
  width: 35%;
  text-align: left;
}

.woo-single form.cart table.variations td select {
  height: auto;
  padding: 10px 20px;
  min-width: 100% !important;
  background: #fff !important;
  border: 1px solid var(--sp-border-color);
  border-radius: var(--sp-border-radius-sm);
  transition: border-color var(--sp-transition);
  cursor: pointer;
}

.woo-single form.cart table.variations td select:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent);
}

.woo-single table.variations tr {
  margin-bottom: 5px;
}

.woo-single form.cart table.variations td,
.woo-single form.cart table.variations th {
  vertical-align: baseline !important;
}

/* =============================================
   Stock Status Badges — lebih konsisten
   ============================================= */
.woo-single p.stock {
  display: inline-block;
  padding: 5px 12px;
  font-weight: 500;
  text-align: center;
  border-radius: var(--sp-border-radius-sm);
}

.woo-single p.stock.in-stock {
  background-color: var(--wp--preset--color--button);
  color: #fff;
}

.woo-single p.stock.out-of-stock {
  background-color: var(--wp--preset--color--red);
  color: #fff;
}

/* =============================================
   Global Cart Layout
   ============================================= */
.woocommerce div.product form.cart div.quantity,
.wp-block-woocommerce-add-to-cart-form .variations_button,
.wp-block-woocommerce-add-to-cart-form form.cart {
  display: block;
}

.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button[name="add-to-cart"] {
  width: 100%;
}

.woocommerce div.product form.cart {
  margin-bottom: 0;
}

:where(.wp-block-woocommerce-add-to-cart-form > * + *) {
  padding: 0;
}

/* =============================================
   Product Tabs
   ============================================= */
@media (max-width: 768px) {
  .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto !important;
    flex-direction: row !important;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  margin-bottom: 0 !important;
}

html body
  .wp-block-woocommerce-product-details.is-style-minimal
  ul.tabs.wc-tabs {
  background-color: var(--wp--preset--color--base-2);
}

.wp-block-woocommerce-product-details.is-style-minimal
  ul.tabs.wc-tabs::-webkit-scrollbar {
  display: none;
}

html body
  .wp-block-woocommerce-product-details.is-style-minimal
  ul.tabs.wc-tabs
  li {
  border-width: 0;
  transition: background-color var(--sp-transition);
}

@media only screen and (max-width: 768px) {
  html body
    .wp-block-woocommerce-product-details.is-style-minimal
    ul.tabs.wc-tabs
    li {
    margin-bottom: 0;
  }
}

html body
  .wp-block-woocommerce-product-details.is-style-minimal
  ul.tabs.wc-tabs
  li
  a {
  width: max-content;
  padding: 0.8em 1em 0.5em;
  font-size: 18px;
  font-weight: 500;
  transition: color var(--sp-transition);
}

.wp-block-woocommerce-product-details.is-style-minimal
  ul.tabs.wc-tabs:before {
  display: block !important;
  border-bottom: 1px solid var(--sp-border-color) !important;
}

html body
  .wp-block-woocommerce-product-details.is-style-minimal
  ul.tabs.wc-tabs
  li:hover {
  border-bottom-color: var(--wp--preset--color--bg);
  border-left-color: var(--wp--preset--color--bg);
  background-color: rgba(0, 0, 0, 0.04);
}

.wp-block-woocommerce-product-details.is-style-minimal
  ul.tabs.wc-tabs
  li.active {
  border-width: 1px 1px 0 !important;
  border-color: var(--sp-border-color) !important;
  background-color: var(--wp--preset--color--base-3) !important;
}

/* Tab Content Panels */
div#tab-description,
div#tab-additional_information,
div#tab-reviews {
  background-color: var(--wp--preset--color--base-3);
  padding: 20px 20px 10px;
  border-left: 1px solid var(--sp-border-color) !important;
  border-right: 1px solid var(--sp-border-color) !important;
  border-bottom: 1px solid var(--sp-border-color) !important;
  animation: fadeInTab 0.2s ease; 
}

@keyframes fadeInTab {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================
   Attributes Table
   ============================================= */
table.woocommerce-product-attributes.shop_attributes {
  border: 1px solid var(--sp-border-color);
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 10px;
  width: 100%;
}

.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th {
  background: rgba(0, 0, 0, 0.06) !important;
}

table.woocommerce-product-attributes.shop_attributes,
.woocommerce table.shop_attributes td {
  font-style: normal;
}

/* =============================================
   Reviews & Ratings
   ============================================= */
.woocommerce .star-rating span::before {
  color: var(--wp--preset--color--luminous-vivid-amber);
}

.tokoo-product-rating--empty .wc-block-components-product-rating__stars {
  color: #c4c4c4 !important;
  font-size: 14px;
}

.woo-single
  .tokoo-product-rating--empty
  .wc-block-components-product-rating__stars {
  font-size: 18px;
  margin-top: -25px;
}

.tokoo-product-rating--empty
  .wc-block-components-product-rating__stars
  span::before {
  color: #c4c4c4 !important;
}

/* Comment List */
.woocommerce #reviews #comments ol.commentlist {
  padding-inline-start: 0;
}

/* Avatar */
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  border-radius: 50%;
  width: var(--sp-avatar-size);
  height: var(--sp-avatar-size);
  object-fit: cover;
  border: 2px solid var(--sp-border-color); 
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin-left: calc(var(--sp-avatar-size) + 15px); 
}