/* K D Sarees — fluid interaction layer.
 * Additive only. Layers press feedback + reduced-motion support on top of the
 * existing design. No layout, content, colour or type changes.
 *
 * Loaded on every page AFTER the page's own <style>, so a small number of
 * !important flags are used purely to guarantee the interaction transitions
 * and the transient press state win over each page's existing `transition`
 * shorthand. Nothing here alters hover colours, shadows or geometry.
 */

/* ---- Unified transition for interactive elements -------------------------
 * The new press properties (transform / opacity / filter) get a fast,
 * critically-damped curve. Hover colour + shadow keep their original ~0.26s
 * feel so the visual design is unchanged. No cubic-bezier here overshoots
 * (all control points stay within 0..1 on Y) — nothing bounces.
 */
.btn-primary, .btn-ghost, .nav-cta, .insta-btn,
.collection-card, .collection-card-new,
.nav-links a, .nav-links .nav-drop > button, .nav-drop-menu a,
.foot-links a, .sidebar-links a, .sidebar-submenu a, .sidebar-dropdown-toggle,
.collstrip-pills a, .breadcrumb a, .faq-question,
.menu-btn, .sidebar-close, .cart-close, .enquiry-close,
.cart-toggle-btn, .cart-copy-btn, .cart-clear-btn, .cart-remove,
.enquiry-fab, .cart-fab, #kdBackToTop {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform  .14s cubic-bezier(.33, 0, .1, 1),
    opacity    .16s cubic-bezier(.33, 0, .1, 1),
    filter     .16s cubic-bezier(.33, 0, .1, 1),
    background        .26s cubic-bezier(.4, 0, .2, 1),
    background-color  .26s cubic-bezier(.4, 0, .2, 1),
    border-color     .26s cubic-bezier(.4, 0, .2, 1),
    color            .26s cubic-bezier(.4, 0, .2, 1),
    box-shadow       .26s cubic-bezier(.4, 0, .2, 1) !important;
}

/* ---- Press state ------------------------------------------------------------
 * Applied on pointer-DOWN by fluid.js (instant feedback, before click fires),
 * removed on release / cancel. The settle back is handled by the curve above:
 * short, monotonic, no bounce or overshoot.
 */
.is-pressed      { transform: scale(.97) !important;  opacity: .82; }
.is-pressed-card { transform: scale(.988) !important; filter: brightness(.975); }
.is-pressed-nav  { transform: none !important;        opacity: .5; }

/* Keyboard / no-JS fallback so :active never feels dead on pointer devices. */
@media (hover: hover) {
  .btn-primary:active, .btn-ghost:active, .nav-cta:active, .insta-btn:active,
  .cart-toggle-btn:active, .cart-copy-btn:active, .menu-btn:active,
  .faq-question:active { transform: scale(.982); }
}

/* ---- Reduced motion (site-wide; was missing) ------------------------------
 * Motion is removed. State + content changes still happen instantly — nothing
 * is hidden, scroll-reveal still reveals, the cart still updates.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
  .is-pressed, .is-pressed-card, .is-pressed-nav {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
 * redesign-existing-projects — targeted polish pass (shared, additive)
 * ======================================================================== */

/* Skip-to-content link: off-screen until it receives keyboard focus. */
.skip-link {
  position: fixed; top: 0; left: 0; z-index: 300;
  transform: translateY(-120%);
  transition: transform .18s cubic-bezier(.33, 0, .1, 1);
  background: var(--maroon); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .02em;
  padding: 12px 20px; border-radius: 0 0 6px 0;
  box-shadow: 0 6px 20px rgba(78, 18, 29, .28);
}
.skip-link:focus { transform: none; outline: 2px solid var(--gold); outline-offset: 2px; }

/* Kill single-word orphans on headings; even out ragged body paragraphs. */
h1, h2, h3, h4, .headline, .page-title, .section-title, .collection-body-new h3 {
  text-wrap: balance;
}
p, li, .section-note { text-wrap: pretty; }

/* Aligned figures in the mono UI text (counts, hours, phone, dividers). */
.stat .val, .design-count, .collstrip-label, .collection-summary, .price-range,
.announce-items, .foot-row, .policy-updated, .faq-cta-hours {
  font-variant-numeric: tabular-nums;
}

/* Subtle grain so the flat cream surfaces read as paper, not screen.
 * Fixed, non-interactive, ~4%. Suppressed when the user asks for less transparency. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 250; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency: reduce) { body::after { display: none; } }

/* --- Active page indicator in the primary nav ---------------------------------
 * The current page reads as "already hovered": maroon text + the nav underline
 * pinned open. Pure CSS on the aria-current attribute the HTML carries.
 */
.nav-links a[aria-current="page"] { color: var(--maroon); }
.nav-links a[aria-current="page"]::after { width: 100%; }
.sidebar-links a[aria-current="page"],
.sidebar-submenu a[aria-current="page"] { color: var(--maroon); }