/* ==========================================================================
   DEMO PHARMA – components.css
   Hand-written classes for the parts of the site that repeat.

   Why this file exists
   --------------------
   `utilities.css` is a PRECOMPILED Tailwind build with no build step, so a
   utility that was never compiled silently does nothing. That is how the
   mobile menu broke: `inset-y-0` was missing, the drawer lost its `top`,
   and it rendered off the bottom of the page with no error anywhere.

   Named component classes remove that whole class of bug for the parts that
   matter, and they drop straight into the WooCommerce templates listed in
   docs-wordpress-conversion.md.

   House style
   -----------
     .block            a component            .product-card
     .block__element   a part of it           .product-card__title
     .block--modifier  a variant of it        .btn--primary
     .u-*              a plain helper         .u-flex

   Load order: variables.css -> reset.css -> utilities.css -> components.css
   This file comes last, so a component class beats a leftover utility.
   ========================================================================== */


/* ==========================================================================
   Buttons
   Replaces 59 different hand-assembled utility strings with one system.
   Default size is the 42px review height.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: var(--btn-h, 42px);
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: calc(var(--radius) - 2px);
  /* no border on the base: the filled variants had none, and adding one here
     would shift every button's inner width by 2px */
  border: 0 solid transparent;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}

.btn > svg { pointer-events: none; width: 1rem; height: 1rem; flex-shrink: 0 }

.btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  /* ring-2 + ring-offset-2 + ring-offset-background + ring-ring */
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.btn:disabled { pointer-events: none; opacity: .5 }

/* --- variants ------------------------------------------------------------ */
.btn--primary            { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)) }
.btn--primary:hover      { background-color: hsl(var(--primary) / .9) }
.btn--primary:disabled   { opacity: .6 }

.btn--secondary          { background-color: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)) }
.btn--secondary:hover    { background-color: hsl(var(--secondary) / .8) }

.btn--outline            { border: 1px solid hsl(var(--input)); background-color: hsl(var(--background)) }
.btn--outline:hover      { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)) }

.btn--outline-primary        { border: 1px solid hsl(var(--primary) / .3); background-color: hsl(var(--background)); color: hsl(var(--primary)) }
.btn--outline-primary:hover  { background-color: hsl(var(--primary) / .05) }

/* the Enquire button on a card: full-strength primary border, no fill */
.btn--ghost-primary          { border: 1px solid hsl(var(--primary)); color: hsl(var(--primary)) }
.btn--ghost-primary:hover    { background-color: hsl(var(--primary) / .05) }

/* --- sizes / shapes ------------------------------------------------------ */
.btn--wide   { padding-left: 2rem; padding-right: 2rem }
.btn--tight  { padding-left: .5rem; padding-right: .5rem; font-size: .75rem; line-height: 1rem; font-weight: 600; gap: .375rem }
.btn--icon   { width: 42px; padding-left: 0; padding-right: 0; flex-shrink: 0 }
.btn--block  { width: 100% }
.btn--grow   { flex: 1 1 0% }
.btn--pill   { border-radius: 9999px }
/* only where the original markup carried whitespace-nowrap - it changes how a
   label wraps, and therefore how wide an intrinsically-sized button gets */
.btn--nowrap { white-space: nowrap }


/* ==========================================================================
   Product card  ->  WooCommerce content-product.php
   The WooCommerce class names (product, woocommerce-loop-product__title,
   price, add_to_cart_button) stay on the markup - Woo's own CSS and JS
   look for them. These component classes sit alongside.
   ========================================================================== */

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  border-radius: .75rem;
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  transition-property: all;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}
.product-card:hover {
  border-color: hsl(var(--primary) / .5);
  /* the only shadow on the site: a soft lift on hover, which the client allowed */
  box-shadow: 0 10px 24px -12px hsl(var(--secondary) / .25);
}

.product-card__media {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: hsl(var(--muted) / .4);
}

.product-card__img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .3s;
}
.product-card:hover .product-card__img { transform: scale(1.05) }

/* corner flags on the image */
.product-card__flag {
  position: absolute;
  left: .5rem;
  top: .5rem;
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: .125rem .625rem;
  font-size: 11px;
  font-weight: 600;
}
.product-card__flag--off        { background-color: hsl(var(--success)); color: hsl(var(--success-foreground)) }
.product-card__flag--oos        { top: auto; bottom: .5rem; background-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)) }

.product-card__wishlist {
  position: absolute;
  right: .5rem;
  top: .5rem;
  z-index: 10;
  display: flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  background-color: hsl(var(--card) / .95);
  color: hsl(var(--muted-foreground));
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}
.product-card__wishlist:hover { border-color: hsl(var(--destructive) / .4); color: hsl(var(--destructive)) }

.product-card__body {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: .375rem;
  padding: .75rem;
}

.product-card__form {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 9999px;
  background-color: hsl(var(--primary) / .1);
  padding: .125rem .5rem;
  font-size: 11px;
  font-weight: 500;
  color: hsl(var(--primary));
}

.product-card__title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2.5rem;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  transition-property: color;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s;
}
.product-card:hover .product-card__title { color: hsl(var(--primary)) }

.product-card__meta {
  font-size: .75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
}
.product-card__meta--clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.product-card__footer { margin-top: auto; padding-top: .25rem }
.product-card__footer > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem }

.product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5rem;
  row-gap: .25rem;
}
.product-card__price ins  { font-size: 1rem; line-height: 1.5rem; font-weight: 700; color: hsl(var(--foreground)); text-decoration-line: none }
.product-card__price del  { font-size: .75rem; line-height: 1rem; color: hsl(var(--muted-foreground)); text-decoration-line: line-through }

.product-card__off {
  border-radius: .25rem;
  background-color: hsl(var(--success) / .1);
  padding: .125rem .375rem;
  font-size: 10px;
  font-weight: 600;
  color: hsl(var(--success));
}

.product-card__actions { display: flex; align-items: center; gap: .5rem }

/* rating row */
.product-card__rating       { display: flex; align-items: center; gap: .25rem }
.product-card__stars        { display: flex; gap: .125rem }
.product-card__rating-value { font-size: .75rem; line-height: 1rem; font-weight: 500; color: hsl(var(--muted-foreground)) }

/* ==========================================================================
   Floating actions (bottom right)
   One floating "Callback" button, bottom right, on every screen size.
   ========================================================================== */

.fab-stack {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  transition: transform .25s ease, opacity .25s ease;
}
@media (min-width: 640px) {
  .fab-stack { right: 1.5rem; bottom: 1.5rem }
}

/* slides out of the way while the page is scrolling down */
.fab-stack[data-hidden="true"] {
  transform: translateY(calc(100% + 1.5rem));
  opacity: 0;
  pointer-events: none;
}

.fab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* 48px on a phone so it takes less of the screen; 56px once there is room */
  height: 3rem;
  width: 3rem;
  flex-shrink: 0;
  border: 1px solid rgb(255 255 255 / .3);
  border-radius: 9999px;
  color: #fff;
  cursor: pointer;
  transition-property: background-color, box-shadow, transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .2s;
}
.fab:active { transform: scale(.94) }
.fab:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

@media (min-width: 640px) {
  .fab { height: 3.5rem; width: 3.5rem }
}

.fab--primary  { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)) }
.fab--primary:hover { background-color: hsl(var(--primary) / .9) }

/* the Callback pill grows a label once there is room for it */
.fab--label { width: auto; height: 2.75rem; padding: 0 1.25rem; font-size: .875rem; font-weight: 500 }

/* Callback and Chat are desktop-only. This has to sit after .fab, which sets
   display:flex - otherwise the later rule wins and they never hide. */
.fab-stack__secondary { display: none }
@media (min-width: 640px) {
  .fab-stack__secondary { display: flex }
}

/* ==========================================================================
   Footer links
   These were 17px tall - fine with a mouse, a poor target with a thumb. The
   padding gives each row a ~36px hit area on a phone and the list some room
   to breathe; desktop keeps its tighter rhythm.
   ========================================================================== */
.footer-link {
  display: inline-block;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
@media (min-width: 768px) {
  .footer-link { padding-top: .125rem; padding-bottom: .125rem }
}

/* ==========================================================================
   Breadcrumb
   The trail scrolls sideways on a phone with the scrollbar hidden, so a long
   product name just looked chopped off. The fade on the right edge shows
   there is more to swipe to. From 640px up the trail wraps instead.
   ========================================================================== */
.breadcrumb { -webkit-overflow-scrolling: touch }
@media (max-width: 639px) {
  .breadcrumb {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent 100%);
  }
}

/* The card action button is alone in its row now, so it can use the full width
   and the normal label size - it was wrapping to "Add to / Cart" at 2-up. */
.product-card__actions .btn { white-space: nowrap }

/* ==========================================================================
   Product page
   ========================================================================== */

/* --- title block ---------------------------------------------------------
   The title stood alone above five empty grey stars, which reads as "rated
   zero" even though the page carries three five-star reviews further down.
   ------------------------------------------------------------------------- */
.pdp-meta {
  margin-top: .25rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
}
.pdp-meta b { font-weight: 600; color: hsl(var(--foreground)) }

.pdp-rating {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  font-size: .875rem;
  text-decoration: none;
  color: hsl(var(--muted-foreground));
}
.pdp-rating:hover .pdp-rating__count { color: hsl(var(--primary)); text-decoration: underline }
.pdp-rating__stars { display: inline-flex; gap: .0625rem }
.pdp-rating__score { font-weight: 700; color: hsl(var(--foreground)) }

/* --- stock + delivery, right above the buy button ------------------------ */
.pdp-stock {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: hsl(var(--success));
}
.pdp-stock svg { width: 1rem; height: 1rem; flex-shrink: 0 }
.pdp-stock span { color: hsl(var(--muted-foreground)); font-weight: 400 }

/* --- secondary ways to order --------------------------------------------
   Four buttons of equal weight gave the page no primary action. Add to Cart
   keeps the filled button; these three drop back to a quiet row.
   ------------------------------------------------------------------------- */
.pdp-alt {
  margin-top: 1rem;
  border-top: 1px solid hsl(var(--border));
  padding-top: 1rem;
}
.pdp-alt__label {
  margin-bottom: .625rem;
  font-size: .8125rem;
  color: hsl(var(--muted-foreground));
}
.pdp-alt__row { display: grid; grid-template-columns: 1fr; gap: .5rem }
@media (min-width: 480px) {
  .pdp-alt__row { grid-template-columns: repeat(3, 1fr) }
}
.pdp-alt__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: var(--btn-h, 42px);
  padding: 0 .75rem;
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--background));
  font-size: .875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.pdp-alt__btn svg { width: 1rem; height: 1rem; flex-shrink: 0 }
.pdp-alt__btn:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)) }

/* --- collapsible description sections ------------------------------------
   The description ran to nine screens on a phone, burying the reviews and
   related products. Each block folds shut on mobile; desktop is unchanged.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .pdp-fold > h4 {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 0;
  }
  .pdp-fold > h4::after {
    content: "";
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
  }
  .pdp-fold[data-open="true"] > h4::after { transform: rotate(-135deg) translate(-2px, -2px) }
  .pdp-fold[data-open="false"] > :not(h4) { display: none }
  .pdp-fold[data-open="true"] > h4 { margin-bottom: .75rem }
}

/* --- sticky buy bar (mobile) ---------------------------------------------
   The page is long. Once the buy box scrolls away there is no way to order
   without scrolling back up, so the price and button follow the reader.
   ------------------------------------------------------------------------- */
.pdp-buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom));
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  transform: translateY(100%);
  transition: transform .25s ease;
}
.pdp-buybar[data-show="true"] { transform: none }
@media (min-width: 768px) { .pdp-buybar { display: none } }

.pdp-buybar__price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0 }
.pdp-buybar__amount { font-size: 1.125rem; font-weight: 700; color: hsl(var(--foreground)) }
.pdp-buybar__pack {
  font-size: .75rem;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pdp-buybar .btn { flex: 1 1 auto; min-width: 0 }

/* the floating button would sit on top of the bar, so lift it while showing */
.fab-stack[data-lifted="true"] { bottom: 5.25rem }