/* =====================================================================
   SOUQ gift flip cards — partials/gift-flip.php + assets/js/flip.js
   (HOMEGIFT 2026-09-16). Linked from the partial: home only.
   BUGFIX 0.5.159 (#49): LOAD ORDER, corrected. This sheet is linked from the
   partial, i.e. in the body BEFORE the tokens/base/components links at body
   end - on purpose: as an in-body stylesheet it holds back the section after
   it until it has loaded, so the section never paints unstyled, and none of
   these rules live in the critical CSS. The price is that a rule here LOSES
   an equal-specificity tie with base.css or components.css: out-rank them
   (as .fan__viewall does) instead of relying on order. Checked 2026-09-19 -
   no selector here collides with those two sheets.

   A card is a perspective box; .flip__inner keeps its two faces in one 3D
   space and rotates 180° about Y. Each face hides its own back
   (backface-visibility), and the face that is turned away is ALSO
   visibility:hidden — that is what keeps its links and buttons out of the
   tab order and out of the accessibility tree while it cannot be seen. The
   visibility switch is delayed by half the turn so the incoming face becomes
   real just as it faces the viewer.

   Hover flips on devices that hover (CSS only); .is-flipped is what flip.js
   sets for touch and keyboard. Safari: overflow/border-radius live on
   .flip__skin INSIDE the face, never on the face itself — clipping a
   3D-transformed face flattens preserve-3d in WebKit and the back shows
   through the front.
   ===================================================================== */
.gifts__head { align-items: flex-start; }
.gifts__lead { min-inline-size: 0; }
.gifts__intro { margin: 4px 0 0; color: var(--sq-ink-soft); font-size: .9375rem; line-height: 1.45; max-inline-size: 52ch; }
.gifts__hint {
  display: none;
  align-items: center;
  gap: 6px;
  margin: -2px 0 12px;
  font-size: .8125rem;
  color: var(--sq-ink-mute);
}
@media (hover: none) { .gifts__hint { display: flex; } }

.gifts__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 768px) { .gifts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

.flip {
  position: relative;
  /* Portrait like the reference. Phones get a little more height: the back
     has to hold a two-line name, a price, a stock line, a chip and two
     controls inside a 46vw column. */
  aspect-ratio: 3 / 4.3;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px) { .flip { aspect-ratio: 3 / 4; } }
.flip__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 640ms cubic-bezier(.4, .1, .2, 1);
  will-change: transform;
}
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
@media (hover: hover) { .flip:hover .flip__inner { transform: rotateY(180deg); } }
/* Same turn, mirrored, so the card opens away from the reading edge either way. */
[dir="rtl"] .flip.is-flipped .flip__inner { transform: rotateY(-180deg); }
@media (hover: hover) { [dir="rtl"] .flip:hover .flip__inner { transform: rotateY(-180deg); } }

.flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);           /* a real 3D layer, so the backface test is clean */
}
.flip__back { transform: rotateY(180deg); }
.flip__skin {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  border-radius: var(--sq-r-lg);
  background: var(--sq-surface);
  border: 1px solid var(--sq-line);
  box-shadow: var(--sq-shadow-1);
}
.flip__skin--back {
  background: var(--sq-surface-warm);
  border-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 14px 44px;
  text-align: center;
}
/* Visibility hand-off: the away face leaves the tree half a turn in, the
   arriving face enters at the same moment. */
.flip__front { visibility: visible; transition: visibility 0s linear 0s; }
.flip__back  { visibility: hidden;  transition: visibility 0s linear 320ms; }
.flip.is-flipped .flip__front { visibility: hidden;  transition-delay: 320ms; }
.flip.is-flipped .flip__back  { visibility: visible; transition-delay: 0s; }
@media (hover: hover) {
  .flip:hover .flip__front { visibility: hidden;  transition-delay: 320ms; }
  .flip:hover .flip__back  { visibility: visible; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .flip__inner { transition: none; }
  .flip__front, .flip__back { transition: none; }
}
/* Lift + shadow while turned, so the open card reads as picked up. */
.flip.is-flipped .flip__skin--back { box-shadow: var(--sq-shadow-2); }
@media (hover: hover) { .flip:hover .flip__skin--back { box-shadow: var(--sq-shadow-2); } }

/* ------------------------------------------------------------ front ---- */
.flip__photo { display: block; position: absolute; inset: 0; color: inherit; }
.flip__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.flip__noimg { display: block; inline-size: 100%; block-size: 100%; background: var(--sq-surface-warm); }
.flip__badges { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; z-index: 2; }
/* Name + price strip over the bottom of the photo. Ink on a white wash, not
   white on a dark scrim: the photos are white cut-outs, and a dark band under
   them reads as a different shop. */
.flip__strip {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 26px 12px 12px;
  background: linear-gradient(to top, rgba(255, 255, 255, .96) 55%, rgba(255, 255, 255, 0));
  pointer-events: none;
}
.flip__strip-name {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sq-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* BUGFIX 0.5.159 (#27): a long word ("Perlmutt-Schmuckschatulle",
     "smaragdcsiszolással") was cut mid-word by the clamp. It now breaks or
     hyphenates, and the clamp still ends in an ellipsis. The .cat-tile__name
     pattern; same four lines in every copy of this rule. */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.flip__strip-price { font-size: .875rem; font-weight: 700; color: var(--sq-ink); }
.flip__turn {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  z-index: 3;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  color: var(--sq-ink-soft);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 0;
  border-radius: var(--sq-r-pill);
  box-shadow: var(--sq-shadow-1);
  cursor: pointer;
  transition: transform var(--sq-t-fast) var(--sq-ease), color var(--sq-t-fast) var(--sq-ease);
}
@media (hover: hover) { .flip__turn:hover { color: var(--sq-accent-ink); } }
.flip__turn:active { transform: scale(.92); }
.flip__turn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sq-focus), var(--sq-shadow-1); }

/* ------------------------------------------------------------- back ---- */
.flip__name {
  margin: 0;
  font-family: var(--sq-font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sq-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* BUGFIX 0.5.159 (#27): a long word ("Perlmutt-Schmuckschatulle",
     "smaragdcsiszolással") was cut mid-word by the clamp. It now breaks or
     hyphenates, and the clamp still ends in an ellipsis. The .cat-tile__name
     pattern; same four lines in every copy of this rule. */
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.flip__name a { color: inherit; text-decoration: none; }
.flip__price { justify-content: center; margin: 0; }
.flip__price .price__now { font-size: 1.125rem; }
.flip__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
}
.flip__meta .pcard__stock { display: inline; margin: 0; font-size: .75rem; }
.flip__meta .pctrust { margin: 0; align-self: center; }
.flip__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-block-start: 6px;
}
/* The grid card's quick-add host, in the flow instead of over a photo; the
   stepper qadd.js appends keeps its components.css look. */
.flip__skin--back .pcard__qwrap {
  position: static;
  inset: auto;
  aspect-ratio: auto;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  pointer-events: auto;
  max-inline-size: 100%;
}
.flip__skin--back .pcard__qwrap > * { margin: 0; }
.flip__skin--back .pcard__qadd {
  position: static;
  inset: auto;
  inline-size: auto;
  min-inline-size: 44px;
  block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-inline: 14px 18px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.flip__details {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  padding-inline: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--sq-accent-ink);
}
.flip__close {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 8px;
  inline-size: 36px;
  block-size: 36px;
  display: grid;
  place-items: center;
  color: var(--sq-ink-soft);
  background: rgba(255, 255, 255, .7);
  border: 0;
  border-radius: var(--sq-r-pill);
  cursor: pointer;
}
.flip__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sq-focus); }
/* Desktop hover turns the card; the close control is for touch and keyboard. */
@media (hover: hover) { .flip:not(.is-flipped) .flip__close { display: none; } }

@media (max-width: 767px) {
  .flip__skin--back { padding: 10px 10px 40px; gap: 4px; }
  .flip__name { font-size: .875rem; -webkit-line-clamp: 2; }
  .flip__price .price__now { font-size: 1rem; }
  .flip__price .price__was { font-size: .75rem; }
  .flip__skin--back .pcard__qadd { block-size: 40px; padding-inline: 12px 14px; font-size: .8125rem; }
  .flip__strip { padding: 22px 10px 10px; }
  .flip__strip-name, .flip__strip-price { font-size: .8125rem; }
  .flip__turn { inline-size: 36px; block-size: 36px; }
}