/*
Theme Name: Hidzab Sestre
Theme URI: https://hidzabsestre.com
Author: Hidzab Sestre
Author URI: https://hidzabsestre.com
Description: Custom WordPress theme for Hidzab Sestre boutique.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hidzab-sestre
Tags: e-commerce, boutique, responsive
*/

/* ---------- brand script (wordmark) ---------- */
      @font-face {
        font-family: "Script Mothers";
        src:
          url("assets/fonts/script-mothers.woff") format("woff"),
          url("assets/fonts/script-mothers.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }

      :root {
        --cream: #faf7f2;
        --sand: #f1e9dc;
        --linen: #e8ddcb;
        --ink: #211f1c;
        --gold: #c2a05f;
      }

      * {
        -webkit-tap-highlight-color: transparent;
      }

      html {
        scroll-behavior: smooth;
      }

      section[id],
      footer[id] {
        scroll-margin-top: 84px;
      }

      body {
        font-family: "DM Sans", sans-serif;
        background-color: var(--cream);
        color: var(--ink);
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }

      ::selection {
        background: #c2a05f;
        color: #fff;
      }

      /* ---------- logo lockup ---------- */
      .logo-lockup {
        display: inline-flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .logo-word {
        font-family: "Script Mothers", "Fraunces", cursive;
        font-size: 2rem;
        line-height: 1.12;
        letter-spacing: 0.005em;
        white-space: nowrap;
      }

      .logo-sub {
        font-family: "DM Sans", sans-serif;
        font-size: 0.5rem;
        font-weight: 500;
        letter-spacing: 0.42em;
        text-transform: uppercase;
        opacity: 0.55;
        margin-top: -0.1em;
        padding-left: 0.2em;
      }

      .logo-lockup--lg .logo-word {
        font-size: 2.55rem;
      }

      .logo-lockup--lg .logo-sub {
        font-size: 0.54rem;
        margin-top: 0;
      }

      /* ---------- decorative pattern ---------- */
      .pattern-star {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c2a05f' stroke-width='0.9'%3E%3Cpath d='M40 6l8 20 20 8-20 8-8 20-8-20-20-8 20-8z'/%3E%3Cpath d='M40 18l4.5 11.5L56 34l-11.5 4.5L40 50l-4.5-11.5L24 34l11.5-4.5z'/%3E%3C/g%3E%3C/svg%3E");
        background-size: 80px 80px;
      }

      .arch {
        border-radius: 50% 50% 10px 10px / 34% 34% 10px 10px;
      }

      /* ---------- reveal on scroll ---------- */
      .reveal {
        opacity: 1;
        transform: none;
      }

      html.js .reveal {
        opacity: 0;
        transform: translateY(34px);
        transition:
          opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--d, 0ms);
      }

      html.js .reveal.in {
        opacity: 1;
        transform: none;
      }

      /* ---------- hero entrance ---------- */
      @keyframes rise {
        from {
          opacity: 0;
          transform: translateY(26px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      .rise {
        animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: var(--d, 0ms);
      }

      @keyframes floaty {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-14px);
        }
      }

      .floaty {
        animation: floaty 7s ease-in-out infinite;
      }

      @keyframes spin-slow {
        to {
          transform: rotate(360deg);
        }
      }

      .spin-slow {
        animation: spin-slow 26s linear infinite;
        will-change: transform;
      }

      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      .marquee-track {
        display: flex;
        width: max-content;
        animation: marquee 32s linear infinite;
        will-change: transform;
      }

      .marquee:hover .marquee-track {
        animation-play-state: paused;
      }

      .shimmer-text {
        background: linear-gradient(100deg, #a8874a 10%, #d9bd83 55%, #a8874a 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      /* ---------- buttons ---------- */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        padding: 0.95rem 2rem;
        border-radius: 999px;
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        transition:
          transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
          box-shadow 0.35s ease,
          background-color 0.35s ease,
          color 0.35s ease;
      }

      .btn:hover {
        transform: translateY(-2px);
      }

      .btn:active {
        transform: translateY(0);
      }

      .btn-ink {
        background: var(--ink);
        color: #fff;
      }

      .btn-ink:hover {
        background: #000;
        box-shadow: 0 18px 40px -18px rgba(33, 31, 28, 0.7);
      }

      .btn-ghost {
        border: 1px solid rgba(33, 31, 28, 0.25);
        color: var(--ink);
      }

      .btn-ghost:hover {
        border-color: var(--ink);
        background: rgba(33, 31, 28, 0.04);
      }

      .btn-gold {
        background: var(--gold);
        color: #fff;
      }

      .btn-gold:hover {
        background: #a8874a;
      }

      .link-underline {
        position: relative;
      }

      .link-underline::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        height: 1px;
        width: 0;
        background: currentColor;
        transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .link-underline:hover::after,
      .link-underline[aria-current="true"]::after {
        width: 100%;
      }

      .product-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover {
  transform: translateY(-4px);
}
      .product-media {
        position: relative;
        overflow: hidden;
        background: linear-gradient(150deg, #efe6d8 0%, #e3d6c1 55%, #d9c9b0 100%);
      }

      .product-media img {
        transition:
          transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.5s ease;
      }

      .product-card:hover .product-media img {
        transform: scale(1.06);
      }

      .quick-add {
        transform: translateY(120%);
        opacity: 0;
        transition:
          transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.35s ease;
      }

      .product-card:hover .quick-add,
      .product-card:focus-within .quick-add {
        transform: translateY(0);
        opacity: 1;
      }

      .monogram {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Fraunces", serif;
        font-size: 6rem;
        color: rgba(194, 160, 95, 0.45);
        pointer-events: none;
      }

      /* ---------- cart drawer ---------- */
      .cart-panel {
        transform: translateX(100%);
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
      }

      .cart-open .cart-panel {
        transform: translateX(0);
      }

      .cart-scrim {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
      }

      .cart-open .cart-scrim {
        opacity: 1;
        pointer-events: auto;
      }

      .cart-line {
        animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      /* ---------- toast ---------- */
      .toast {
        transform: translateY(140%);
        opacity: 0;
        transition:
          transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.4s ease;
      }

      .toast.show {
        transform: translateY(0);
        opacity: 1;
      }

      body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
      .filter-pill {
        padding: 0.6rem 1.35rem;
        border-radius: 999px;
        border: 1px solid rgba(33, 31, 28, 0.16);
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-weight: 600;
        color: #6f6a64;
        transition: all 0.3s ease;
        white-space: nowrap;
      }

      .filter-pill:hover {
        border-color: var(--gold);
        color: var(--ink);
      }

      .filter-pill.active {
        background: var(--ink);
        border-color: var(--ink);
        color: #fff;
      }

      .progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        width: 0;
        background: linear-gradient(90deg, #c2a05f, #e8d5a5);
        z-index: 100;
      }

      .nav-scrolled {
        background: rgba(250, 247, 242, 0.97);
        box-shadow: 0 1px 0 rgba(33, 31, 28, 0.08);
      }

      .wish-btn.active svg {
        fill: #c0392b;
        stroke: #c0392b;
      }

      .wish-btn svg {
        transition:
          transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
          fill 0.3s ease,
          stroke 0.3s ease;
      }

      .wish-btn.active svg {
        transform: scale(1.15);
      }

      .qty-btn {
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        border: 1px solid rgba(33, 31, 28, 0.15);
        transition: all 0.25s ease;
      }

      .qty-btn:hover {
        background: var(--ink);
        color: #fff;
        border-color: var(--ink);
      }

      .social-dot {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.7);
        transition: all 0.3s ease;
      }

      .social-dot:hover {
        color: #211f1c;
        background: #c2a05f;
        border-color: #c2a05f;
        transform: translateY(-3px);
      }

      :focus-visible {
        outline: 2px solid #c2a05f;
        outline-offset: 3px;
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.001ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.001ms !important;
        }
        html {
          scroll-behavior: auto;
        }
        .reveal {
          opacity: 1;
          transform: none;
        }
      }