/**
 * FYOOL WooCommerce overrides — classic + Blocks cart/checkout/shop.
 * Loaded after WooCommerce block styles.
 */

/* ─── Shared scope (classic + blocks) ─── */
.fy-woo-main .fy-woocommerce-wrap,
.fy-woo-main .woocommerce {
  font-family: 'Barlow', sans-serif;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

.fy-woo-shop-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 40px 0;
}

.fy-woo-shop-shell .fy-blog-breadcrumb {
  margin-bottom: 0;
}

.fy-woocommerce-wrap--shop .fy-shop-archive {
  padding-top: 24px;
}

/* ─── Links ─── */
.fy-woo-main a {
  color: var(--blue);
  transition: opacity 0.2s;
}

.fy-woo-main a:hover {
  opacity: 0.85;
}

.fy-woo-main .woocommerce-Price-amount,
.fy-woo-main .wc-block-components-product-price,
.fy-woo-main .wc-block-components-formatted-money-amount {
  font-weight: 700;
  color: var(--text);
}

/* ─── Buttons (classic + blocks) ─── */
.fy-woo-main .button,
.fy-woo-main a.button,
.fy-woo-main button.button,
.fy-woo-main input.button,
.fy-woo-main #place_order,
.fy-woo-main .wc-block-components-button:not(.is-link),
.fy-woo-main .wc-block-cart__submit-button,
.fy-woo-main .wc-block-components-checkout-place-order-button {
  background: linear-gradient(90deg, var(--blue), #1677d2) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 24px !important;
  line-height: 1.3 !important;
  box-shadow: none !important;
  transition: opacity 0.2s !important;
}

.fy-woo-main .button:hover,
.fy-woo-main a.button:hover,
.fy-woo-main .wc-block-components-button:not(.is-link):hover {
  opacity: 0.92 !important;
  color: #fff !important;
}

.fy-woo-main .button.alt,
.fy-woo-main a.button.checkout-button,
.fy-woo-main .wc-block-cart__submit-container .wc-block-components-button {
  width: 100%;
}

/* Primary commerce CTAs — green (cart checkout, place order) */
.fy-woo-main a.button.checkout-button,
.fy-woo-main #place_order,
.fy-woo-main .wc-block-cart__submit-container .wc-block-components-button,
.fy-woo-main .wc-block-components-checkout-place-order-button {
  background: var(--green) !important;
  color: #052e16 !important;
  box-shadow: 0 4px 14px rgba(50, 205, 50, 0.3);
}

.fy-woo-main a.button.checkout-button:hover,
.fy-woo-main #place_order:hover,
.fy-woo-main .wc-block-cart__submit-container .wc-block-components-button:hover,
.fy-woo-main .wc-block-components-checkout-place-order-button:hover {
  opacity: 0.94 !important;
  color: #052e16 !important;
}

.fy-woo-main .button.wc-backward,
.fy-woo-main .button[name='update_cart'],
.fy-woo-main .wc-block-components-button.is-link {
  background: transparent !important;
  color: var(--blue) !important;
  border: none !important;
  text-transform: none !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 600 !important;
  padding: 0 !important;
  width: auto !important;
}

.fy-woo-main .button[name='update_cart'] {
  background: #fff !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  text-transform: uppercase !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  padding: 10px 20px !important;
  width: auto !important;
}

/* ─── Form fields (classic + blocks) ─── */
.fy-woo-main input[type='text'],
.fy-woo-main input[type='email'],
.fy-woo-main input[type='tel'],
.fy-woo-main input[type='number'],
.fy-woo-main input[type='password'],
.fy-woo-main input[type='url'],
.fy-woo-main select,
.fy-woo-main textarea,
.fy-woo-main .input-text,
.fy-woo-main .wc-block-components-text-input input,
.fy-woo-main .wc-block-components-combobox input,
.fy-woo-main .wc-block-components-select-control__select {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 15px !important;
  color: var(--text) !important;
  background: #fff !important;
  min-height: 46px;
  box-shadow: none !important;
}

.fy-woo-main input:focus,
.fy-woo-main select:focus,
.fy-woo-main textarea:focus,
.fy-woo-main .wc-block-components-text-input input:focus {
  outline: none !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.12) !important;
}

.fy-woo-main label,
.fy-woo-main .wc-block-components-text-input label,
.fy-woo-main .wc-block-components-checkbox__label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* ─── Notices ─── */
.fy-woo-main .woocommerce-message,
.fy-woo-main .woocommerce-info,
.fy-woo-main .wc-block-components-notice-banner.is-info,
.fy-woo-main .wc-block-components-notice-banner.is-success {
  border: 1px solid #bfdbfe !important;
  border-radius: 12px !important;
  background: var(--blue-soft) !important;
  color: var(--text) !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
}

.fy-woo-main .woocommerce-error,
.fy-woo-main .wc-block-components-notice-banner.is-error {
  border: 1px solid #fecaca !important;
  border-radius: 12px !important;
  background: #fef2f2 !important;
  color: #991b1b !important;
  list-style: none;
}

/* ─── Tables (classic cart / checkout) ─── */
.fy-woo-main table.shop_table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 24px;
}

.fy-woo-main table.shop_table th {
  background: var(--surface);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.fy-woo-main table.shop_table td {
  padding: 16px;
  border-top: 1px solid var(--border);
  vertical-align: middle;
}

.fy-woo-main table.shop_table .product-thumbnail img {
  width: 72px;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.fy-woo-main table.shop_table .product-name a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.fy-woo-main table.shop_table .product-remove a {
  color: var(--muted);
  font-size: 22px;
  text-decoration: none;
}

.fy-woo-main .quantity .qty {
  width: 64px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
}

/* ─── Cart collaterals / order review panels ─── */
.fy-woo-main .cart-collaterals .cart_totals,
.fy-woo-main #order_review,
.fy-woo-main .woocommerce-checkout-review-order,
.fy-woo-main #payment {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.fy-woo-main .cart-collaterals .cart_totals,
.fy-woo-main #order_review {
  padding: 24px 28px;
}

.fy-woo-main #payment {
  border-radius: 14px;
  margin-top: 20px;
  overflow: hidden;
}

.fy-woo-main #payment ul.payment_methods {
  padding: 16px 20px 0;
  border-bottom: 1px solid var(--border);
  list-style: none;
  margin: 0;
}

.fy-woo-main #payment div.payment_box {
  background: #fff;
  border-radius: 10px;
  font-size: 14px;
  color: var(--muted);
}

.fy-woo-main #payment div.form-row {
  padding: 16px 20px 20px;
}

/* ─── Block cart ─── */
.fy-woo-main .wp-block-woocommerce-cart,
.fy-woo-main .wc-block-cart {
  font-family: 'Barlow', sans-serif;
  color: var(--text);
}

.fy-woo-main .wc-block-cart__main {
  gap: 24px;
}

.fy-woo-main .wc-block-cart-items,
.fy-woo-main .wc-block-components-main {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.fy-woo-main .wc-block-cart-items__header,
.fy-woo-main .wc-block-cart-items__row {
  border-color: var(--border) !important;
}

.fy-woo-main .wc-block-cart-items__header {
  background: var(--surface);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.fy-woo-main .wc-block-cart-item__image img {
  border-radius: 10px;
  border: 1px solid var(--border);
}

.fy-woo-main .wc-block-components-product-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}

.fy-woo-main .wc-block-components-product-name a {
  color: var(--text);
  text-decoration: none;
}

.fy-woo-main .wc-block-components-product-name a:hover {
  color: var(--blue);
}

.fy-woo-main .wc-block-components-quantity-selector {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.fy-woo-main .wc-block-components-quantity-selector__input {
  border: none !important;
  min-height: 36px !important;
}

.fy-woo-main .wc-block-components-sidebar,
.fy-woo-main .wc-block-cart__sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px !important;
}

.fy-woo-main .wc-block-components-totals-wrapper,
.fy-woo-main .wc-block-components-totals-item,
.fy-woo-main .wc-block-components-totals-footer-item {
  border-color: var(--border) !important;
}

.fy-woo-main .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.fy-woo-main .wc-block-components-panel,
.fy-woo-main .wc-block-components-totals-coupon {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}

.fy-woo-main .wc-block-components-panel__button {
  font-family: 'Barlow', sans-serif !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  padding: 14px 16px !important;
}

.fy-woo-main .wc-block-cart__empty-cart,
.fy-woo-main .cart-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 16px;
}

.fy-woo-main .wc-block-cart__empty-cart__title,
.fy-woo-main .cart-empty.woocommerce-info {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--text);
  border: none;
  background: transparent;
  padding: 0;
}

.fy-woo-main .return-to-shop .button {
  margin-top: 16px;
}

/* ─── Block checkout ─── */
.fy-woo-main .wp-block-woocommerce-checkout,
.fy-woo-main .wc-block-checkout {
  font-family: 'Barlow', sans-serif;
}

.fy-woo-main .wc-block-checkout__main {
  gap: 32px;
}

.fy-woo-main .wc-block-checkout__sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px !important;
}

.fy-woo-main .wc-block-components-checkout-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px !important;
  margin-bottom: 20px;
}

.fy-woo-main .wc-block-components-checkout-step__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  color: var(--text) !important;
  margin-bottom: 16px !important;
}

.fy-woo-main .wc-block-components-radio-control__option,
.fy-woo-main .wc-block-components-checkbox {
  border-color: var(--border);
}

.fy-woo-main .wc-block-components-radio-control__option-checked {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 1px var(--blue);
}

.fy-woo-main .wc-block-checkout__order-note {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

/* ─── Shop grid (with or without .woocommerce ancestor quirks) ─── */
.fy-woo-main ul.products.fy-pgrid,
.fy-woo-main .fy-woocommerce-wrap ul.products.fy-pgrid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
}

.fy-woo-main ul.products.fy-pgrid::before,
.fy-woo-main ul.products.fy-pgrid::after {
  display: none !important;
  content: none !important;
}

.fy-woo-main ul.products.fy-pgrid li.product {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

.fy-woo-main .woocommerce-result-count,
.fy-woo-main .woocommerce-ordering {
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 0 40px;
  color: var(--muted);
  font-size: 14px;
}

.fy-woo-main .woocommerce-ordering select {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'Barlow', sans-serif;
  color: var(--text);
  background: #fff;
}

/* ─── My account (classic) ─── */
.fy-woo-main .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.fy-woo-main .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--border);
  margin: 0;
}

.fy-woo-main .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}

.fy-woo-main .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.fy-woo-main .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--blue-soft);
  color: var(--blue);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .fy-woo-main ul.products.fy-pgrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fy-woo-main .wc-block-cart,
  .fy-woo-main .wc-block-checkout {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .fy-woo-shop-shell {
    padding: 32px 24px 0;
  }

  .fy-woo-main .woocommerce-result-count,
  .fy-woo-main .woocommerce-ordering {
    padding: 0 24px;
  }

  .fy-woo-main ul.products.fy-pgrid {
    padding: 0 24px 40px;
  }
}

@media (max-width: 480px) {
  .fy-woo-main ul.products.fy-pgrid {
    grid-template-columns: 1fr;
    padding: 0 20px 32px;
  }
}

/* Addon items (bottle / box) on the cart page — qty is always 1, no input */
.fy-addon-qty-locked {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  font-weight: 600;
  color: var(--muted, #6b7280);
  font-size: 14px;
}

/* ── Cart page addon / box row visual differentiation ── */

/* Collapsible bundle add-on rows: hidden until the toggle is expanded */
tr.fy-cart-addon-collapsed {
  display: none !important;
}

tr.fy-cart-row--addons-toggle td {
  border-top: none !important;
  padding: 8px 1em 10px !important;
}

.fy-cart-addons-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue, #1e90ff);
}

.fy-cart-addons-toggle:hover {
  opacity: 0.8;
}

.fy-cart-addons-chevron::before {
  content: '▸';
  display: inline-block;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.fy-cart-addons-toggle.open .fy-cart-addons-chevron::before {
  transform: rotate(90deg);
}

/* Shared: slightly recessed appearance for both addon types */
tr.fy-cart-row--addon,
tr.fy-cart-row--box {
  background-color: var(--surface-alt, #f9fafb);
}

tr.fy-cart-row--addon td,
tr.fy-cart-row--box td {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  border-top: none !important;            /* merge visually with the parent row */
  font-size: 13px;
  color: var(--muted, #6b7280);
}

/* Left edge accent — matches the drawer's addon (blue) / box (amber) tags */
tr.fy-cart-row--addon td:first-child {
  border-left: 3px solid #bfdbfe !important;
  padding-left: calc(1em + 3px) !important;
}

tr.fy-cart-row--box td:first-child {
  border-left: 3px solid #fef08a !important;
  padding-left: calc(1em + 3px) !important;
}

/* Product name: slightly smaller and muted */
tr.fy-cart-row--addon .product-name,
tr.fy-cart-row--box .product-name {
  font-size: 13px;
  font-weight: 500;
}

/* Tag pill — inline label before the product name. Colours + casing mirror
   the cart drawer's .fy-ci-addon-tag / .fy-ci-box-tag so both views read the
   same. */
tr.fy-cart-row--addon .fy-cart-product-name::before {
  content: '+ Add-on';
  display: block;
  width: fit-content;
  margin: 0 0 4px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  line-height: 1.6;
}

tr.fy-cart-row--box .fy-cart-product-name::before {
  content: '📦 Included';
  display: block;
  width: fit-content;
  margin: 0 0 4px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  background: #fefce8;
  border: 1px solid #fef08a;
  color: #854d0e;
  line-height: 1.6;
}

/* Thumbnail: slightly smaller so addon rows feel subordinate */
tr.fy-cart-row--addon .product-thumbnail img,
tr.fy-cart-row--box .product-thumbnail img {
  width: 44px !important;
  height: 44px !important;
  opacity: .8;
}


/* ─── Order details: group bundle add-ons under the main purchase ───
   Shown on both the My Account order view and the order-received (thank-you)
   page. woocommerce_order_item_class tags rows .fy-order-row--bundle and
   .fy-order-row--included / --free; the add-on / box / bottle lines are tinted
   and indented so they read as components of the purchase rather than separate
   buys. (New orders also carry .fy-order-group-* / .fy-order-parent-*.) */
.woocommerce-table--order-details tr.fy-order-row--included > td {
  background: var(--surface);
}

.woocommerce-table--order-details tr.fy-order-row--included td.product-name {
  padding-left: 26px;
  font-weight: 400;
}

.woocommerce-table--order-details tr.fy-order-row--included td.product-name a {
  color: var(--muted);
}

.woocommerce-table--order-details tr.fy-order-row--bundle td.product-name {
  font-weight: 700;
}

/* "Included" tag on the free add-on lines (boxes, bottles, mixed flavors). */
.woocommerce-table--order-details tr.fy-order-row--free td.product-name::after {
  content: 'Included';
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #15803d;
  background: var(--green-soft, #f0fdf4);
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Collapse bundle add-ons under their bundle line (assets/js/order-details.js). */
.woocommerce-table--order-details tr.fy-order-addon-collapsed {
  display: none;
}

.woocommerce-table--order-details tr.fy-order-addons-toggle-row > td {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border);
}

.fy-order-addons-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue, #1e90ff);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.fy-order-addons-toggle:hover {
  opacity: 0.8;
}

.fy-order-addons-chevron::before {
  content: '▸';
  display: inline-block;
  font-size: 12px;
  transition: transform 0.2s;
}

.fy-order-addons-toggle.open .fy-order-addons-chevron::before {
  transform: rotate(90deg);
}

/* Hide cartoon packaging boxes from client-facing order displays (order
   received + My Account order view). Admin order edit uses .woocommerce_order_items
   and keeps them; customer emails hide them via woocommerce_order_item_visible. */
.woocommerce-table--order-details tr.fy-order-row--box {
  display: none;
}