/* Pockets & Friends — WooCommerce Styles */

/* ── Layout / wrapper ─────────────────────── */
.woocommerce,
.woocommerce-page {
  background: var(--bg-deep);
  color: var(--text-hi);
}

body.woocommerce-page #pf-main,
body.woocommerce #pf-main {
  display: block;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 2rem) 1.5rem 6rem;
}

.woocommerce-breadcrumb { display: none; } /* theme already renders its own breadcrumb bar */

/* Custom shop header (eyebrow + H1), mirrors page-songs.php */
.pf-shop-header { text-align: center; margin-bottom: 3rem; }
.pf-shop-header h1 { margin-top: 1rem; font-family: var(--fh); font-weight: 800; }

/* ── Buttons ─────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .checkout-button,
.woocommerce #payment #place_order {
  background: linear-gradient(135deg, var(--hat-orange), var(--bow-pink)) !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-family: var(--fh) !important;
  font-weight: 800 !important;
  padding: 13px 28px !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(244,132,30,.35) !important;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease) !important;
  text-transform: none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #payment #place_order:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(244,132,30,.52) !important;
}
.woocommerce a.button.alt { background: linear-gradient(135deg, var(--hat-orange), var(--bow-pink)) !important; }
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after { border-color: #fff !important; }

/* Secondary / plain buttons (e.g. "Select options" outline variants, coupon apply) */
.woocommerce a.button.wc-forward,
.woocommerce .woocommerce-message a.button {
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
}

/* ── Product loop / shop archive ──────────────── */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 0 0 3rem !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 0 0 1.2rem;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  position: relative;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
@media (hover: hover) and (pointer: fine) {
  .woocommerce ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 44px rgba(0,0,0,.5);
    border-color: rgba(255,255,255,0.15);
  }
  .woocommerce ul.products li.product:hover img { transform: scale(1.06); }
}

.woocommerce ul.products li.product a img {
  border-radius: var(--radius) var(--radius) 0 0 !important;
  margin: 0 0 1rem !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .4s var(--ease);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--fh) !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: var(--text-hi) !important;
  padding: 0 1.1rem;
  margin: 0 0 .4rem !important;
}

.woocommerce ul.products li.product .price {
  color: var(--pocket-gold) !important;
  font-weight: 800 !important;
  font-family: var(--fb) !important;
  padding: 0 1.1rem;
  display: block;
  margin-bottom: .7rem;
}
.woocommerce ul.products li.product .price del { color: var(--text-lo) !important; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

.woocommerce ul.products li.product .button {
  margin: 0 1.1rem !important;
  width: calc(100% - 2.2rem);
  text-align: center;
  padding: 10px 18px !important;
  font-size: .88rem !important;
}

.woocommerce span.onsale {
  background: linear-gradient(135deg, var(--bow-pink), var(--hat-purple)) !important;
  color: #fff;
  font-family: var(--fh);
  font-weight: 800;
  border-radius: 100px;
  min-height: unset;
  min-width: unset;
  padding: 5px 13px;
  top: 10px;
  left: 10px;
  line-height: 1;
  font-size: .72rem;
}

.woocommerce .star-rating { color: var(--pocket-gold) !important; }
.woocommerce .star-rating::before { color: rgba(255,255,255,0.15) !important; }

/* Category pills on product cards, via product category badge (reuses .pf-pill look) */
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product mark.count { color: var(--text-md); }

/* Result count / ordering bar */
.woocommerce-result-count,
.woocommerce-ordering {
  color: var(--text-md) !important;
  font-size: .85rem;
}
.woocommerce-ordering select {
  background: var(--bg-card) !important;
  color: var(--text-hi) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--fb) !important;
}
.woocommerce .woocommerce-notices-wrapper ~ .woocommerce-result-count,
.woocommerce > .woocommerce-result-count { margin-bottom: 1.2rem; }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul { border: none !important; background: none !important; display: flex; gap: .5rem; }
.woocommerce nav.woocommerce-pagination ul li { border: none !important; background: none !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  background: var(--bg-card) !important;
  color: var(--text-hi) !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  padding: .6em 1em !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

/* No products found */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
p.no-products-found {
  background: var(--bg-card) !important;
  color: var(--text-hi) !important;
  border-top-color: var(--hat-orange) !important;
  border-radius: var(--radius-sm) !important;
  padding: 1rem 1.3rem !important;
}
.woocommerce-error { border-top-color: var(--bow-pink) !important; }

/* ── Single product page ───────────────── */
.woocommerce div.product .product_title {
  font-family: var(--fh) !important;
  color: var(--text-hi) !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--pocket-gold) !important;
  font-weight: 800;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--text-md);
  line-height: 1.7;
}
.woocommerce div.product form.cart .quantity input.qty {
  background: var(--bg-card) !important;
  color: var(--text-hi) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--radius-sm) !important;
  height: 48px;
}
.woocommerce div.product .woocommerce-product-rating { color: var(--text-md); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--bg-card) !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--text-md) !important; font-family: var(--fb); font-weight: 700; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--bg-mid) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--text-hi) !important; }
.woocommerce div.product .woocommerce-tabs .panel {
  background: var(--bg-mid);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 1.5rem;
  color: var(--text-md);
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: var(--radius-sm);
  opacity: .55;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active { opacity: 1; }

.stock.in-stock { color: var(--letter-green) !important; font-weight: 700; }
.stock.out-of-stock { color: var(--bow-pink) !important; font-weight: 700; }

/* Related products headline */
.woocommerce div.product .related.products > h2 {
  font-family: var(--fh);
  color: var(--text-hi);
  margin-bottom: 1.2rem;
}

/* ── Cart page ─────────────────────── */
.woocommerce table.shop_table {
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  background: var(--bg-card);
}
.woocommerce table.shop_table th {
  background: var(--bg-mid) !important;
  color: var(--text-hi) !important;
  font-family: var(--fh);
  border: none !important;
}
.woocommerce table.shop_table td {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--text-md) !important;
}
.woocommerce table.shop_table .product-name a { color: var(--text-hi) !important; font-weight: 700; }
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal { color: var(--pocket-gold) !important; font-weight: 800; }

.woocommerce td.actions .coupon .input-text,
.woocommerce-cart .cart-collaterals .shipping-calculator-form input.input-text,
.woocommerce-cart .cart-collaterals .shipping-calculator-form select {
  background: var(--bg-card) !important;
  color: var(--text-hi) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
}

.woocommerce-cart table.cart td.actions .button[name="update_cart"] {
  background: rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals {
  background: var(--bg-mid);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.woocommerce .cart_totals table { background: none; border: none !important; }
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td { background: none !important; border-top: 1px solid rgba(255,255,255,0.07) !important; color: var(--text-md) !important; }
.woocommerce .cart_totals .order-total .amount { color: var(--pocket-gold) !important; font-weight: 800; font-size: 1.1rem; }

/* Remove-item icon */
.woocommerce a.remove {
  color: var(--bow-pink) !important;
  background: rgba(232,65,154,0.12) !important;
}
.woocommerce a.remove:hover { background: var(--bow-pink) !important; color: #fff !important; }

/* ── Checkout page ──────────────────── */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
  background: var(--bg-card) !important;
  color: var(--text-hi) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  font-family: var(--fb) !important;
}
.woocommerce-checkout input.input-text::placeholder { color: var(--text-lo) !important; }
.woocommerce-checkout .select2-container .select2-selection--single {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--radius-sm) !important;
  height: 46px !important;
}
.select2-container .select2-selection__rendered { color: var(--text-hi) !important; line-height: 46px !important; }
.select2-dropdown { background: var(--bg-mid) !important; border-color: rgba(255,255,255,0.14) !important; }
.select2-results__option { color: var(--text-hi) !important; }
.select2-results__option--highlighted { background: var(--primary) !important; }

.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order-table {
  background: var(--bg-mid);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.woocommerce-checkout-review-order-table { background: none !important; border: none !important; padding: 0 !important; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { border-top: 1px solid rgba(255,255,255,0.07) !important; color: var(--text-md) !important; }
.woocommerce-checkout-review-order-table .order-total .amount { color: var(--pocket-gold) !important; font-weight: 800; }

#payment { background: var(--bg-mid) !important; border-radius: var(--radius) !important; }
#payment ul.payment_methods { border-bottom-color: rgba(255,255,255,0.08) !important; }
#payment .wc_payment_method label { color: var(--text-hi) !important; font-weight: 700; }
#payment div.payment_box { background: var(--bg-card) !important; color: var(--text-md) !important; }
#payment div.payment_box::before { border-bottom-color: var(--bg-card) !important; }

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
  font-family: var(--fh) !important;
  color: var(--text-hi) !important;
}

/* ── My Account ─────────────────────── */
.woocommerce-MyAccount-navigation ul { background: var(--bg-card); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,0.07); }
.woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid rgba(255,255,255,0.06); }
.woocommerce-MyAccount-navigation ul li a { color: var(--text-md) !important; padding: 12px 18px; display: block; font-weight: 700; }
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover { color: var(--text-hi) !important; background: rgba(255,255,255,0.05); }
.woocommerce-MyAccount-content { color: var(--text-md); }
.woocommerce-MyAccount-content table.shop_table { background: var(--bg-card); }
.woocommerce-MyAccount-content mark { background: none; color: var(--pocket-gold); font-weight: 700; }

.woocommerce form.login,
.woocommerce form.register,
.woocommerce-ResetPassword {
  background: var(--bg-mid);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 2rem;
}
.woocommerce form.login input.input-text,
.woocommerce form.register input.input-text { background: var(--bg-card) !important; color: var(--text-hi) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: var(--radius-sm) !important; }

/* Downloads table (digital books/music) */
.woocommerce-MyAccount-downloads table .download-file a { color: var(--hat-blue) !important; font-weight: 700; }

/* ── Nav cart icon badge ──────────────────── */
.pf-nav-cart-link { position: relative; }
.pf-nav-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-left: 3px;
  background: var(--bow-pink);
  color: #fff;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
}

/* Blocks (Cart / Checkout use the block-based UI, not classic templates) */
main#pf-main .wp-block-woocommerce-cart,
main#pf-main .wp-block-woocommerce-checkout {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
  color: var(--text-hi);
}

.wc-block-components-main,
.wc-block-components-sidebar {
  color: var(--text-hi);
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained,
.wc-block-components-button.wp-element-button {
  background: linear-gradient(135deg, var(--hat-orange), var(--bow-pink)) !important;
  color: #fff !important;
  border-radius: 100px !important;
  font-family: var(--fh) !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(244,132,30,.35) !important;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease) !important;
}
.wc-block-components-button.contained:hover,
.wc-block-cart__submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(244,132,30,.52) !important;
}

.wc-block-cart-items,
.wc-block-components-totals-wrapper,
.wc-block-components-panel,
.wc-block-checkout__main,
.wc-block-checkout__sidebar .wc-block-components-panel,
form.wc-block-checkout__form .wc-block-components-address-form,
.wc-block-components-order-summary {
  color: var(--text-md);
}

.wc-block-cart-items__header,
.wc-block-cart-items__row { border-color: rgba(255,255,255,0.08) !important; }

.wc-block-components-product-name { color: var(--text-hi) !important; font-weight: 700; }
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount {
  color: var(--pocket-gold) !important;
  font-weight: 700;
}
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount { font-size: 1.1rem; font-weight: 800; }

.wc-block-components-quantity-selector {
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: var(--bg-card) !important;
  border-radius: var(--radius-sm) !important;
}
.wc-block-components-quantity-selector__input { background: transparent !important; color: var(--text-hi) !important; }
.wc-block-components-quantity-selector__button { color: var(--text-md) !important; }

.wc-block-cart__totals-title,
.wc-block-components-panel__button,
.wc-block-checkout__title,
.wc-block-components-checkout-step__title {
  color: var(--text-hi) !important;
  font-family: var(--fh) !important;
}

.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-checkout__form input[type="text"],
.wc-block-checkout__form input[type="email"],
.wc-block-checkout__form input[type="tel"],
.wc-block-components-textarea,
select {
  background: var(--bg-card) !important;
  color: var(--text-hi) !important;
  border-color: rgba(255,255,255,0.16) !important;
  border-radius: var(--radius-sm) !important;
}

.wc-blocks-components-select__container {
  background: var(--bg-card) !important;
  border-radius: var(--radius-sm) !important;
}
.wc-blocks-components-select__select {
  color: var(--text-hi) !important;
}
.wc-blocks-components-select__label {
  color: var(--text-lo) !important;
}
.wc-block-components-text-input label { color: var(--text-lo) !important; }

.wc-block-components-radio-control__option,
.wc-block-components-shipping-rates-control__package {
  background: var(--bg-card) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-hi) !important;
}
.wc-block-components-radio-control__option--checked {
  border-color: var(--hat-orange) !important;
}

.wc-block-components-express-payment { margin-bottom: 1.5rem; }
.wc-block-components-express-payment__title-text { color: var(--text-lo) !important; }

.wc-block-components-order-summary-item__individual-prices,
.wc-block-components-totals-coupon__link { color: var(--hat-blue) !important; }

.wc-block-components-notice-banner {
  background: var(--bg-card) !important;
  color: var(--text-hi) !important;
  border-color: var(--hat-orange) !important;
}

.woocommerce-order-received .wc-block-order-confirmation-summary,
.woocommerce-order-received .wc-block-order-confirmation-downloads {
  background: var(--bg-mid);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: var(--text-md);
}
/* ── Responsive ─────────────────────── */
@media (max-width: 600px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
  .woocommerce table.shop_table { font-size: .85rem; }
}