/* ---------------------------------------------------------------------------
   The WooCommerce layer for the exported shop and product pages.

   css/shop.css and css/product.css are generated and draw the design exactly as
   it was mocked: gradient covers, a card grid, a WhatsApp CTA. Everything in
   here is the part the mock never had -- real product imagery, add to cart,
   notices, the cart pill, paging -- styled to the same tokens. Hand-authored,
   kept out of the generated files so a re-export cannot overwrite it.
   ------------------------------------------------------------------------ */

/* --- real imagery, where the export had gradient covers ------------------ */

/* The cover keeps its gradient underneath, so a product with no featured image
   still looks deliberate rather than broken. */
.prod-cover-img,
.prod-hero-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- badges -------------------------------------------------------------- */

/* A card can carry more than one now (Popular / Sale / Sold out). */
.prod-card .badge + .badge,
.pe-detail-badges .badge + .badge {
  margin-left: 6px;
}

.pe-detail-badges {
  display: block;
  margin-bottom: 16px;
}

.badge-sold-out {
  background: var(--ink-50);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

/* --- price --------------------------------------------------------------- */

/* get_price_html() wraps a sale in <del>/<ins>; the export only ever drew one
   flat figure. */
.prod-price del,
.pe-detail-price del {
  margin-right: 8px;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.prod-price ins,
.pe-detail-price ins {
  text-decoration: none;
}

.prod-price .woocommerce-Price-currencySymbol,
.pe-detail-price .woocommerce-Price-currencySymbol {
  font-weight: inherit;
}

.pe-detail-price {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  color: var(--text-primary);
}

.pe-detail-price del {
  font-size: 24px;
}

/* --- add to cart --------------------------------------------------------- */

.pe-add-to-cart form.cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

/* 16px of padding, not 14, so the field ends up the same 55px tall as the
   button beside it. */
.pe-add-to-cart .quantity input {
  width: 92px;
  padding: 16px 12px;
  font-family: var(--font-body);
  font-size: 16px;
  text-align: center;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
}

.pe-add-to-cart .quantity input:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 3px var(--blue-50);
}

/* WooCommerce hides these itself, in the stylesheet these pages strip. Without
   it the sale prices read "100 $ Original price was: 100 $. 49 $ Current price
   is: 49 $." out loud on the page. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* WooCommerce renders its own <button>, so this repeats .btn-lg .btn-primary
   rather than adding the classes to markup we do not own. */
.pe-add-to-cart button,
.pe-add-to-cart .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-inverse);
  background: var(--blue-500);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-accent);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
}

.pe-add-to-cart button:hover,
.pe-add-to-cart .button:hover {
  background: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(59, 130, 246, 0.28);
}

.pe-add-to-cart button:active,
.pe-add-to-cart .button:active {
  transform: translateY(0) scale(0.98);
  transition-duration: var(--duration-fast);
}

.pe-add-to-cart button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.pe-add-to-cart .stock.out-of-stock {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--danger);
}

/* --- what's included ----------------------------------------------------- */

/* The export hand-wrote its checklist; this is the product description, so the
   check has to come from the bullet itself. */
.pe-included {
  color: var(--text-secondary);
}

.pe-included > :first-child { margin-top: 0; }
.pe-included > :last-child  { margin-bottom: 0; }

.pe-included p {
  margin: 0 0 16px;
}

.pe-included ul,
.pe-included ol {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.pe-included li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--text-primary);
}

.pe-included li::before {
  content: "\2713";
  margin-top: 1px;
  color: var(--blue-500);
  font-weight: 700;
}

/* --- notices ------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 20px;
  padding: 16px 20px;
  list-style: none;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--blue-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.woocommerce-error {
  border-left-color: var(--danger);
}

.woocommerce-error li {
  list-style: none;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  order: 2;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
  transition: all var(--duration-base) var(--ease-out);
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
  color: var(--text-primary);
  background: var(--ink-50);
}

/* --- the cart pill in the header ----------------------------------------- */

.pe-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-inverse);
  background: var(--blue-500);
  border-radius: var(--radius-full);
}

/* --- paging and the empty shop ------------------------------------------- */

.pe-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}

.pe-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-secondary);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  transition: all var(--duration-base) var(--ease-out);
}

.pe-pagination .page-numbers:hover {
  color: var(--text-accent);
  border-color: var(--border-accent);
}

.pe-pagination .page-numbers.current {
  color: var(--text-inverse);
  background: var(--blue-500);
  border-color: var(--blue-500);
  box-shadow: var(--shadow-accent);
}

.pe-empty {
  padding: 48px 0 24px;
  text-align: center;
  color: var(--text-secondary);
}

/* --- the category tabs --------------------------------------------------- */

/* The design's filter row. These are links to real archives rather than
   buttons, so the active one is whatever WooCommerce is already showing. */
.pe-cat-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.pe-cat-tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  transition: all var(--duration-base) var(--ease-out);
}

.pe-cat-tab:hover {
  color: var(--text-accent);
  border-color: var(--border-accent);
}

.pe-cat-tab.is-active {
  color: var(--text-inverse);
  background: var(--blue-500);
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}

/* --- the shelf a card sits on -------------------------------------------- */

/* z-index 2 clears both .prod-cover-img (1) and the cover's own ::after
   highlight, which is painted with no z-index of its own. */
.prod-cat {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
}

@media (max-width: 640px) {
  .pe-cat-tab {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* --- price qualifiers ----------------------------------------------------- */

/* $800 is a month and $100 is an hour, and "from" is the honest word for a
   custom scope. WooCommerce holds one flat figure per product, so pe_price_html()
   hangs the qualifier off it rather than it being written into the product name.
   Sized down against the figure so the number still reads first. */
.prod-price .pe-price-prefix,
.pe-detail-price .pe-price-prefix,
.prod-price .pe-price-suffix,
.pe-detail-price .pe-price-suffix {
  font-size: 0.62em;
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}