/* ==========================================================================
   CLOZSY - SHARED COMPONENTS
   --------------------------------------------------------------------------
   Components used by more than one template. Extracted from home.css in
   Phase 6 so the Shop archive renders the SAME product card as the home page
   rather than a second implementation of it.

   Deliberately unprefixed: these classes are the component contract, and any
   template may host them. All values read --clz-* tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PRODUCT CARD
   Shared by the home "Featured pieces" grid and the Shop / product archive.
   -------------------------------------------------------------------------- */
.clz-product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.clz-product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--clz-border);
  border-radius: var(--clz-radius-md);
  background-color: var(--clz-surface);
}

.clz-product-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--clz-duration-slow) var(--clz-ease);
}

.clz-product-card:hover .clz-product-card__media img { transform: scale(1.04); }

.clz-product-card__media:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
}

.clz-product-card__badge {
  position: absolute;
  top: var(--clz-space-3);
  inset-inline-start: var(--clz-space-3);
  padding: 4px 8px;
  border-radius: var(--clz-radius-xs);
  background-color: var(--clz-accent);
  color: var(--clz-on-accent);
  font-family: var(--clz-font-body);
  font-size: 10px;
  font-weight: var(--clz-fw-semibold);
  letter-spacing: var(--clz-ls-caps);
  text-transform: uppercase;
}

/* Doubled class: the name is an <h3> for document structure, and the Elementor
   kit's global `.elementor-kit-11 h3` rule at (0,1,1) would otherwise render it
   as a 32px display heading. The anchor is doubled for the same reason against
   the kit's global `a` colour. */
.clz-product-card__name.clz-product-card__name {
  margin: var(--clz-space-4) 0 0;
  font-family: var(--clz-font-body);
  font-size: 15px;
  font-weight: var(--clz-fw-medium);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--clz-text);
}

.clz-product-card__name.clz-product-card__name a { color: inherit; text-decoration: none; }
.clz-product-card__name.clz-product-card__name a:hover { color: var(--clz-accent); }

.clz-product-card__price.clz-product-card__price {
  margin: var(--clz-space-2) 0 0;
  font-family: var(--clz-font-heading);
  font-size: 16px;
  font-weight: var(--clz-fw-semibold);
  letter-spacing: 0;
  color: var(--clz-text-secondary);
}

.clz-product-card__price del { opacity: 0.6; margin-inline-end: 6px; }
.clz-product-card__price ins { text-decoration: none; color: var(--clz-text); }


/* --------------------------------------------------------------------------
   BUTTONS
   Shared by the home hero, the collection band, the closing CTA and the Shop
   archive empty state. Restrained radius, no gradient, no lift, no shadow.

   The class is doubled so the rules sit at (0,2,0) and keep outranking the
   Elementor kit's global button and anchor rules without !important.
   -------------------------------------------------------------------------- */
.clz-btn.clz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--clz-radius-sm);
  font-family: var(--clz-font-body);
  font-size: 14px;
  font-weight: var(--clz-fw-semibold);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--clz-transition),
    border-color var(--clz-transition),
    color var(--clz-transition);
}

.clz-btn.clz-btn:focus-visible {
  outline: none;
  box-shadow: var(--clz-ring);
}

.clz-btn.clz-btn--primary {
  background-color: var(--clz-accent);
  border-color: var(--clz-accent);
  color: var(--clz-on-accent);
}

.clz-btn.clz-btn--primary:hover {
  background-color: var(--clz-accent-hover);
  border-color: var(--clz-accent-hover);
}

.clz-btn.clz-btn--ghost {
  background-color: transparent;
  border-color: var(--clz-border-strong);
  color: var(--clz-text);
}

.clz-btn.clz-btn--ghost:hover {
  border-color: var(--clz-accent);
  color: var(--clz-accent);
}

.clz-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--clz-space-3);
  margin-top: var(--clz-space-6);
}

/* --------------------------------------------------------------------------
   MOTION PREFERENCES
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .clz-product-card__media img { transition: none; }
  .clz-product-card:hover .clz-product-card__media img { transform: none; }
}

/* Full-width buttons read as deliberate on a phone and give a comfortable
   target without inflating them on desktop. */
@media (max-width: 767.98px) {
  .clz-btn.clz-btn {
    flex: 1 1 100%;
    min-height: 50px;
  }
}