/*------------------------------------*\
  #ATELIER — cursor, horno, esmalte y hover orgánico
\*------------------------------------*/

@view-transition {
    navigation: auto;
}

.header {
    view-transition-name: ikra-header;
}

.kiln-loader,
.ikra-cursor {
    view-transition-name: none;
}

::view-transition-group(*) {
    animation-duration: 0.52s;
    animation-timing-function: var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.ikra-piece-ghost {
    position: fixed;
    z-index: 9950;
    pointer-events: none;
    margin: 0;
    max-width: none;
    object-fit: cover;
    will-change: transform;
    box-shadow:
        0 8px 16px -8px rgba(var(--ink-rgb), 0.14),
        0 24px 44px -18px rgba(var(--ink-rgb), 0.22);
}

html.piece-travel-pending .pd-stage__img.is-active,
html.piece-travel-pending #mainProductImage {
    opacity: 0 !important;
}

html.piece-travel-pending .kiln-loader {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .ikra-piece-ghost {
        display: none !important;
    }
}

/* Scroll-linked glaze sweep across product photos */
@keyframes move-glaze-reflection {
    from {
        background-position: 8% 50%;
    }
    to {
        background-position: 92% 50%;
    }
}

.product-card__media::after,
.pd-stage::after,
.history-pair__frame::after,
.process-step__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background-image: linear-gradient(
        118deg,
        transparent 0%,
        transparent 38%,
        rgba(255, 250, 240, 0) 44%,
        rgba(255, 248, 235, 0.38) 50%,
        rgba(255, 250, 240, 0) 56%,
        transparent 100%
    );
    background-size: 260% 100%;
    background-position: 12% 50%;
    mix-blend-mode: soft-light;
    opacity: 0.72;
    transition:
        background-position 0.7s var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        opacity 0.45s ease,
        filter 0.45s ease;
}

.storefront .product-card__media::before,
.collection-page .product-card__media::before,
.product-page .product-card__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 92% 82% at 50% 40%,
        transparent 42%,
        rgba(28, 18, 12, 0.22) 100%
    );
    opacity: 0.58;
    transition: opacity 0.5s var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.product-card__badges {
    z-index: 3;
}

.storefront .product-card__cue,
.collection-page .product-card__cue {
    z-index: 3;
}

@supports (animation-timeline: view()) {
    .product-card__media::after,
    .pd-stage::after,
    .history-pair__frame::after,
    .process-step__media::after {
        animation: move-glaze-reflection linear both;
        animation-timeline: view();
        animation-range: entry 10% exit 90%;
    }
}

@supports not (animation-timeline: view()) {
    .product-card__media::after,
    .pd-stage::after,
    .history-pair__frame::after,
    .process-step__media::after {
        transition: background-position 0.7s var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1)),
            opacity 0.45s ease,
            filter 0.45s ease;
    }
}

/* Irregular ceramic tile — pixel radii so tall feature cards do not become blobs */
.storefront .product-card,
.collection-page .product-card,
.product-page .product-card {
    --clay-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ceramic-radius: 22px 16px 24px 18px / 18px 24px 16px 22px;
    --ceramic-radius-hover: 16px 26px 18px 22px / 24px 16px 22px 18px;
    --ceramic-tilt: -0.32deg;
    --ceramic-lift: -9px;
    --photo-shift-x: 0%;
    --photo-shift-y: -1.15%;
    position: relative;
    z-index: 0;
    isolation: isolate;
    overflow: hidden;
    transform-origin: 50% 100%;
    border-radius: var(--ceramic-radius);
    box-shadow:
        0 1px 2px rgba(var(--ink-rgb), 0.06),
        0 2px 4px rgba(var(--ink-rgb), 0.05),
        0 8px 16px -6px rgba(var(--ink-rgb), 0.08),
        0 20px 36px -18px rgba(var(--ink-rgb), 0.16);
    transition:
        transform 520ms var(--clay-ease),
        box-shadow 520ms var(--clay-ease),
        border-color 320ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        border-radius 560ms var(--clay-ease),
        z-index 0s 520ms;
}

.product-card[data-organic="1"] {
    --ceramic-radius: 16px 24px 18px 26px / 22px 16px 26px 18px;
    --ceramic-radius-hover: 24px 16px 22px 18px / 16px 26px 18px 24px;
    --ceramic-tilt: 0.38deg;
    --photo-shift-x: 1.1%;
    --photo-shift-y: -0.7%;
}

.product-card[data-organic="2"] {
    --ceramic-radius: 26px 18px 16px 22px / 16px 22px 24px 18px;
    --ceramic-radius-hover: 18px 24px 22px 16px / 26px 18px 16px 24px;
    --ceramic-tilt: -0.42deg;
    --photo-shift-x: -0.9%;
    --photo-shift-y: -0.85%;
}

.storefront .product-card:has(.product-card__link:focus-visible),
.collection-page .product-card:has(.product-card__link:focus-visible),
.product-page .product-card:has(.product-card__link:focus-visible) {
    z-index: 4;
    border-radius: var(--ceramic-radius-hover);
    transform: translateY(var(--ceramic-lift)) rotate(var(--ceramic-tilt));
    transition:
        transform 520ms var(--clay-ease),
        box-shadow 520ms var(--clay-ease),
        border-color 320ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        border-radius 560ms var(--clay-ease),
        z-index 0s;
    box-shadow:
        0 1px 2px rgba(var(--ink-rgb), 0.08),
        0 8px 14px -8px rgba(var(--ink-rgb), 0.12),
        0 22px 36px -16px rgba(var(--ink-rgb), 0.2),
        0 36px 56px -22px rgba(var(--ink-rgb), 0.18),
        inset 0 1px 0 rgba(255, 248, 238, 0.38);
}

.storefront .product-card:has(.product-card__link:focus-visible) .product-card__media::after,
.collection-page .product-card:has(.product-card__link:focus-visible) .product-card__media::after,
.product-page .product-card:has(.product-card__link:focus-visible) .product-card__media::after {
    background-position: 90% 50%;
    opacity: 1;
    filter: brightness(1.18);
}

.storefront .product-card:has(.product-card__link:focus-visible) .product-card__media::before,
.collection-page .product-card:has(.product-card__link:focus-visible) .product-card__media::before,
.product-page .product-card:has(.product-card__link:focus-visible) .product-card__media::before {
    opacity: 0.16;
}

@media (hover: hover) and (pointer: fine) {
    .storefront .product-card:hover,
    .collection-page .product-card:hover,
    .product-page .product-card:hover {
        z-index: 4;
        border-radius: var(--ceramic-radius-hover);
        transform: translateY(var(--ceramic-lift)) rotate(var(--ceramic-tilt));
        transition:
            transform 520ms var(--clay-ease),
            box-shadow 520ms var(--clay-ease),
            border-color 320ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
            border-radius 560ms var(--clay-ease),
            z-index 0s;
        box-shadow:
            0 1px 2px rgba(var(--ink-rgb), 0.08),
            0 8px 14px -8px rgba(var(--ink-rgb), 0.12),
            0 22px 36px -16px rgba(var(--ink-rgb), 0.2),
            0 36px 56px -22px rgba(var(--ink-rgb), 0.18),
            inset 0 1px 0 rgba(255, 248, 238, 0.38);
    }

    .product-card:hover .product-card__media::after,
    .pd-stage:hover::after,
    .history-pair__frame:hover::after,
    .process-step__media:hover::after {
        background-position: 90% 50%;
        opacity: 1;
        filter: brightness(1.18);
    }

    .storefront .product-card:hover .product-card__media::before,
    .collection-page .product-card:hover .product-card__media::before,
    .product-page .product-card:hover .product-card__media::before {
        opacity: 0.16;
    }
}

.storefront .product-card__media,
.collection-page .product-card__media,
.product-page .product-card__media {
    border-radius: inherit;
}

/* Wordmark burns into the kiln photos; page titles sink into the clay watermark */
.storefront .hero .brand-name,
.storefront .hero .brand-subtitle {
    mix-blend-mode: overlay;
    text-shadow: none;
    opacity: 0.92;
}

.storefront .hero .brand-name {
    color: #f3e6d6;
}

.storefront .hero .brand-subtitle {
    color: #e4d3c2;
}

.storefront .section-title,
.collection-page .section-title,
.history-page .section-title {
    mix-blend-mode: color-burn;
    opacity: 0.9;
}

/* Subgrid aligns photo + body rows in equal grids only — never bento heroes */
@supports (grid-template-rows: subgrid) {
    .storefront .products-grid:not(.products-grid--atelier) > .product-card,
    .product-page .products-grid:not(.products-grid--atelier) > .product-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        height: auto;
    }

    .storefront .products-grid:not(.products-grid--atelier) > .product-card > .product-card__link,
    .product-page .products-grid:not(.products-grid--atelier) > .product-card > .product-card__link {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 1 / span 2;
        height: 100%;
    }
}


.kiln-loader {
    position: fixed;
    inset: 0;
    z-index: 9800;
    display: grid;
    place-items: center;
    background: #1a2e38;
    color: #f3ebe3;
    transition: opacity 0.7s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        visibility 0.7s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

html.kiln-done .kiln-loader,
.kiln-loader.is-done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

html.kiln-skip .kiln-loader,
.kiln-loader[hidden] {
    display: none !important;
}

.kiln-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
}

.kiln-svg {
    width: min(42vw, 168px);
    height: auto;
    overflow: visible;
}

.kiln-body {
    fill: #243d48;
    stroke: #8eacb8;
    stroke-width: 1.4;
}

.kiln-brick {
    fill: none;
    stroke: rgba(142, 172, 184, 0.35);
    stroke-width: 1;
}

.kiln-arch {
    fill: #10181c;
}

.kiln-glow {
    fill: #e39a4c;
    opacity: 0.35;
    transform-origin: 80px 148px;
    animation: kilnGlow 1.6s ease-in-out infinite;
}

.kiln-flame {
    fill: #f0c27a;
    transform-origin: 80px 152px;
    animation: kilnFlame 0.9s ease-in-out infinite;
}

.kiln-flame--core {
    fill: #fff4d6;
    animation-duration: 0.7s;
    animation-delay: -0.2s;
}

.kiln-heat {
    fill: none;
    stroke: #d8c4ae;
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: 0.55;
    animation: kilnHeat 1.8s ease-in-out infinite;
}

.kiln-heat:nth-child(2) {
    animation-delay: -0.45s;
}

.kiln-heat:nth-child(3) {
    animation-delay: -0.9s;
}

.kiln-loader__label {
    margin: 0;
    font-family: var(--font-secondary, 'Cormorant Garamond', serif);
    font-size: 1.15rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f3ebe3;
}

body[data-ui-theme="dark"] .kiln-loader {
    background: #10161a;
}

@keyframes kilnFlame {
    0%,
    100% {
        transform: scaleY(0.86) scaleX(1);
    }
    50% {
        transform: scaleY(1.12) scaleX(0.94);
    }
}

@keyframes kilnGlow {
    0%,
    100% {
        opacity: 0.22;
        transform: scale(0.92);
    }
    50% {
        opacity: 0.55;
        transform: scale(1.08);
    }
}

@keyframes kilnHeat {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    35% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        transform: translateY(-18px);
    }
}

/* Custom cursor — only composed in JS on fine pointers */
.ikra-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    z-index: 9900;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
    transition:
        opacity 180ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        width 320ms var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        height 320ms var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        margin 320ms var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1));
    will-change: transform;
}

.ikra-cursor.is-on {
    opacity: 1;
}

.ikra-cursor__svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(0.72);
    transform-origin: center;
    transition: transform 220ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.ikra-cursor.is-on .ikra-cursor__svg {
    transform: scale(1);
}

.ikra-cursor.is-on.is-press .ikra-cursor__svg {
    transform: scale(0.86);
}

.ikra-cursor__disc {
    fill: #b08968;
}

.ikra-cursor__grain {
    fill: #b08968;
}

.ikra-cursor__rim {
    fill: none;
    stroke: #6e4b36;
    stroke-width: 1.35;
}

.ikra-cursor__glint,
.ikra-cursor__spark {
    opacity: 0;
    transition: opacity 220ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.ikra-cursor.is-glaze {
    mix-blend-mode: plus-lighter;
}

.ikra-cursor.is-glaze .ikra-cursor__disc {
    fill: #d7ece8;
}

.ikra-cursor.is-glaze .ikra-cursor__rim {
    stroke: #f7fbff;
}

.ikra-cursor.is-glaze .ikra-cursor__glint,
.ikra-cursor.is-glaze .ikra-cursor__spark {
    opacity: 1;
}

.ikra-cursor__spark {
    fill: #fff8ee;
    transform-origin: 41px 23px;
    animation: glazeSpark 1.1s ease-in-out infinite;
}

.ikra-cursor__glint {
    fill: none;
    stroke: #fff8ee;
    stroke-width: 1.7;
    stroke-linecap: round;
}

@keyframes glazeSpark {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.25) rotate(18deg);
    }
}

.ikra-cursor__ring {
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(255, 248, 238, 0.55);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.72);
    transition:
        opacity 240ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        transform 320ms var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.ikra-cursor__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.55rem;
    font-family: var(--font-primary, inherit);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    color: #fff8ee;
    text-shadow: 0 1px 2px rgba(16, 22, 26, 0.28);
    white-space: pre-line;
    opacity: 0;
    transform: scale(0.86);
    transition:
        opacity 220ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        transform 280ms var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.ikra-cursor.is-piece {
    width: 96px;
    height: 96px;
    margin: -48px 0 0 -48px;
    mix-blend-mode: normal;
}

.ikra-cursor.is-piece .ikra-cursor__svg {
    transform: scale(1.18);
}

.ikra-cursor.is-piece.is-press .ikra-cursor__svg {
    transform: scale(1.04);
}

.ikra-cursor.is-piece.is-press .ikra-cursor__ring {
    transform: scale(0.9);
}

.ikra-cursor.is-piece .ikra-cursor__disc {
    fill: var(--color-primary, #304e5c);
    fill-opacity: 0.92;
}

.ikra-cursor.is-piece .ikra-cursor__grain {
    opacity: 0;
}

.ikra-cursor.is-piece .ikra-cursor__rim {
    stroke: #f4efe6;
    stroke-width: 1.1;
}

.ikra-cursor.is-piece .ikra-cursor__glint,
.ikra-cursor.is-piece .ikra-cursor__spark {
    opacity: 0.85;
}

.ikra-cursor.is-piece .ikra-cursor__ring {
    opacity: 1;
    transform: scale(1);
    animation: pieceRing 9s linear infinite;
}

.ikra-cursor.is-piece .ikra-cursor__label {
    opacity: 1;
    transform: none;
}

@keyframes pieceRing {
    from {
        transform: scale(1) rotate(0deg);
    }
    to {
        transform: scale(1) rotate(360deg);
    }
}

@media (hover: hover) and (pointer: fine) {
    html.has-ikra-cursor:not(.kiln-booting) .js-atelier-photo:hover,
    html.has-ikra-cursor:not(.kiln-booting) .js-atelier-photo:hover *,
    html.has-ikra-cursor:not(.kiln-booting) .product-card:hover,
    html.has-ikra-cursor:not(.kiln-booting) .product-card:hover * {
        cursor: none;
    }

    html.has-ikra-cursor:not(.kiln-booting) .js-atelier-photo:hover .pd-nav,
    html.has-ikra-cursor:not(.kiln-booting) .js-atelier-photo:hover .pd-zoom,
    html.has-ikra-cursor:not(.kiln-booting) .js-atelier-photo:hover .pd-thumb,
    html.has-ikra-cursor:not(.kiln-booting) .js-atelier-photo:hover button {
        cursor: pointer;
    }

    html.has-ikra-cursor:not(.kiln-booting) .product-card:hover .product-card__cue {
        opacity: 0;
        transform: translate3d(5px, 10px, 0) scale(0.82);
        transition-delay: 0ms;
    }
}

/* Organic clip-path — same 20 points so the rim morphs like thrown clay */
.product-card {
    --organic-rest: polygon(
        0% 0%, 20% 0%, 40% 0%, 60% 0%, 80% 0%, 100% 0%,
        100% 20%, 100% 40%, 100% 60%, 100% 80%, 100% 100%,
        80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%,
        0% 80%, 0% 60%, 0% 40%, 0% 20%
    );
    --organic-hover: polygon(
        1.6% 2.2%, 20% 0.5%, 40% 1.2%, 61% 0.35%, 81% 0.9%, 98.4% 2.4%,
        99.5% 21%, 98.2% 40%, 99.6% 61%, 98.4% 80%, 97.6% 98%,
        80% 99.3%, 59% 98.3%, 40% 99.4%, 20% 98.4%, 1.8% 97.4%,
        0.5% 79%, 1.4% 59%, 0.35% 39%, 1.1% 19%
    );
}

.product-card[data-organic="1"] {
    --organic-hover: polygon(
        1.2% 1.8%, 21% 0.4%, 39% 1.05%, 58% 0.7%, 79% 0.25%, 98.6% 1.9%,
        99.8% 22%, 98% 39%, 99.2% 59%, 99.5% 78%, 97.8% 98.2%,
        78% 98.8%, 61% 99.5%, 42% 98%, 21% 99.2%, 1.9% 97.6%,
        0.3% 77%, 1.1% 61%, 0.7% 41%, 0.45% 21%
    );
}

.product-card[data-organic="2"] {
    --organic-hover: polygon(
        2.1% 1.4%, 21% 1.5%, 43% 0.3%, 64% 0.95%, 83% 0.55%, 98.3% 2.8%,
        98.6% 23%, 99.5% 43%, 97.8% 63%, 98.8% 82%, 97.4% 98.4%,
        77% 98.1%, 57% 99.3%, 36% 98.2%, 17% 99%, 1.4% 96.6%,
        0.6% 74%, 0.35% 55%, 1.3% 36%, 0.5% 16%
    );
}

.storefront .product-card__media,
.collection-page .product-card__media,
.product-page .product-card__media {
    background-color: #d7c4ad;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(92, 58, 36, 0.12) 0.7px, transparent 1px),
        radial-gradient(circle at 72% 68%, rgba(255, 248, 238, 0.18) 0.6px, transparent 1px);
    background-size: 8px 8px, 11px 11px;
}

.storefront .product-card__img,
.collection-page .product-card__img,
.product-page .product-card__img {
    -webkit-clip-path: var(--organic-rest);
    clip-path: var(--organic-rest);
    transform: none;
    transform-origin: 50% 42%;
    filter: none;
    transition:
        transform 560ms var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        opacity 280ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        filter 480ms var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        clip-path 560ms var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1)),
        -webkit-clip-path 560ms var(--clay-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.storefront .product-card__link:focus-visible .product-card__img,
.collection-page .product-card__link:focus-visible .product-card__img,
.product-page .product-card__link:focus-visible .product-card__img {
    -webkit-clip-path: var(--organic-hover);
    clip-path: var(--organic-hover);
    transform: scale(1.068) translate3d(var(--photo-shift-x, 0%), var(--photo-shift-y, -1.15%), 0);
    filter: brightness(1.045) saturate(1.07) contrast(1.03);
}

@media (hover: hover) and (pointer: fine) {
    .storefront .product-card:hover .product-card__img,
    .collection-page .product-card:hover .product-card__img,
    .product-page .product-card:hover .product-card__img {
        -webkit-clip-path: var(--organic-hover);
        clip-path: var(--organic-hover);
        transform: scale(1.068) translate3d(var(--photo-shift-x, 0%), var(--photo-shift-y, -1.15%), 0);
        filter: brightness(1.045) saturate(1.07) contrast(1.03);
    }

    .pd-stage:hover .pd-stage__img.is-active {
        -webkit-clip-path: var(--organic-hover);
        clip-path: var(--organic-hover);
    }

    .storefront .product-card.is-sold-out:hover .product-card__img,
    .collection-page .product-card.is-sold-out:hover .product-card__img,
    .product-page .product-card.is-sold-out:hover .product-card__img {
        filter: grayscale(0.18) brightness(0.96) contrast(1.02);
    }
}

.pd-stage {
    --organic-rest: polygon(
        0% 0%, 20% 0%, 40% 0%, 60% 0%, 80% 0%, 100% 0%,
        100% 20%, 100% 40%, 100% 60%, 100% 80%, 100% 100%,
        80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%,
        0% 80%, 0% 60%, 0% 40%, 0% 20%
    );
    --organic-hover: polygon(
        2.8% 5.4%, 20% 1.1%, 42% 3.2%, 61% 0.7%, 82% 2.4%, 97.2% 6.1%,
        99.4% 22%, 96.6% 41%, 99.2% 62%, 97.1% 81%, 93.6% 96.8%,
        79% 99%, 58% 96.8%, 37% 99.2%, 18% 97.2%, 3% 92.4%,
        0.6% 76%, 3.4% 56%, 0.8% 37%, 2.2% 17%
    );
}

.pd-stage__img {
    -webkit-clip-path: var(--organic-rest);
    clip-path: var(--organic-rest);
    transition:
        opacity 0.45s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        clip-path 640ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        -webkit-clip-path 640ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.product-page .pd-stage::after {
    content: none;
}

.product-page .pd-stage,
.product-page .pd-stage__img {
    --organic-rest: none;
    --organic-hover: none;
    -webkit-clip-path: none;
    clip-path: none;
}

@media (hover: hover) and (pointer: fine) {
    .product-page .pd-stage:hover .pd-stage__img.is-active {
        -webkit-clip-path: none;
        clip-path: none;
        transform: none;
        filter: none;
    }
}

/* Historia — same clay edge as the shop tiles */
.history-pair__frame,
.process-step__media,
.history-voice__photo {
    position: relative;
    --ceramic-radius: 22px 16px 24px 18px / 18px 24px 16px 22px;
    --ceramic-radius-hover: 16px 26px 18px 22px / 24px 16px 22px 18px;
    --organic-rest: polygon(
        0% 0%, 20% 0%, 40% 0%, 60% 0%, 80% 0%, 100% 0%,
        100% 20%, 100% 40%, 100% 60%, 100% 80%, 100% 100%,
        80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%,
        0% 80%, 0% 60%, 0% 40%, 0% 20%
    );
    --organic-hover: polygon(
        3.6% 6.2%, 19% 1.4%, 41% 3.8%, 62% 0.8%, 81% 2.9%, 96.4% 5.8%,
        99.2% 21%, 96.8% 42%, 99.6% 61%, 96.4% 80%, 93% 96.2%,
        78.5% 99.2%, 59% 96.4%, 38% 99.4%, 19% 96.8%, 3.4% 93.2%,
        0.7% 78%, 3.8% 58%, 0.5% 39%, 2.6% 18%
    );
    border-radius: var(--ceramic-radius);
    overflow: hidden;
    transition: border-radius 0.55s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.history-pair__frame--piece {
    --ceramic-radius: 16px 24px 18px 26px / 22px 16px 26px 18px;
    --ceramic-radius-hover: 24px 16px 22px 18px / 16px 26px 18px 24px;
}

.process-step:nth-child(even) .process-step__media {
    --ceramic-radius: 26px 18px 16px 22px / 16px 22px 24px 18px;
}

.history-pair__frame img,
.process-step__media img,
.history-voice__photo img {
    -webkit-clip-path: var(--organic-rest);
    clip-path: var(--organic-rest);
    transition:
        transform 640ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        clip-path 640ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
        -webkit-clip-path 640ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}

@media (hover: hover) {
    .history-pair__frame:hover,
    .process-step__media:hover,
    .history-voice__photo:hover {
        border-radius: var(--ceramic-radius-hover);
    }

    .history-pair__frame:hover img,
    .process-step__media:hover img,
    .history-voice__photo:hover img {
        -webkit-clip-path: var(--organic-hover);
        clip-path: var(--organic-hover);
        transform: scale(1.025);
    }
}

.philosophy-tile,
.firing-step,
.history-voice {
    --ceramic-radius: 22px 16px 24px 18px / 18px 24px 16px 22px;
    border-radius: var(--ceramic-radius);
}

.philosophy-tile:nth-child(even),
.history-voice:nth-child(even) {
    --ceramic-radius: 16px 24px 18px 26px / 22px 16px 26px 18px;
}

/* Pieces settle onto the board as they enter */
@keyframes ikra-settle {
    from {
        opacity: 0.42;
        transform: translateY(18px) scale(0.972);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ikra-title-sink {
    from {
        transform: none;
    }

    to {
        transform: translateY(10px);
    }
}

@keyframes ikra-incise {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes ikra-pair-studio {
    from {
        transform: scale(1.035);
    }

    to {
        transform: scale(1) translateY(10px);
    }
}

@keyframes ikra-pair-piece {
    from {
        opacity: 0.72;
        transform: translateY(22px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(-6px) scale(1.02);
    }
}

@keyframes ikra-process-wipe {
    from {
        transform: scaleX(0);
        opacity: 0.2;
    }

    to {
        transform: scaleX(1);
        opacity: 0.55;
    }
}

@keyframes ikra-firing-heat {
    from {
        transform: scaleY(0.08);
        opacity: 0.35;
    }

    to {
        transform: scaleY(1);
        opacity: 0.9;
    }
}

.history-page .section-eyebrow {
    position: relative;
}

.history-page .section-eyebrow::after {
    content: '';
    display: block;
    width: 2.4rem;
    height: 1px;
    margin-top: 0.55rem;
    background: currentColor;
    opacity: 0.42;
    transform-origin: left center;
}

.process-strip {
    isolation: isolate;
    position: relative;
}

.process-strip::after {
    content: '';
    position: absolute;
    top: 36%;
    left: 0;
    right: 0;
    height: 2px;
    pointer-events: none;
    z-index: 2;
    transform-origin: left center;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 248, 235, 0.15) 18%,
        rgba(255, 248, 235, 0.7) 50%,
        rgba(255, 248, 235, 0.15) 82%,
        transparent 100%
    );
    mix-blend-mode: soft-light;
}

@supports (animation-timeline: view()) {
    .storefront .product-card,
    .collection-page .product-card,
    .product-page .product-card {
        animation: ikra-settle linear both;
        animation-timeline: view();
        animation-range: entry calc(6% + (var(--card-i, 0) * 2%)) entry 50%;
    }

    .process-step,
    .philosophy-tile,
    .firing-step,
    .history-voice {
        animation: ikra-settle linear both;
        animation-timeline: view();
        animation-range: entry calc(8% + (var(--step-i, 0) * 6%)) entry 52%;
    }

    .collection-page .section-title,
    .history-page .section-title {
        animation: ikra-title-sink linear both;
        animation-timeline: view();
        animation-range: cover 12% cover 72%;
    }

    .history-page .section-eyebrow::after {
        animation: ikra-incise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 42%;
    }

    .history-pair__frame--studio {
        animation: ikra-pair-studio linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 70%;
    }

    .history-pair__frame--piece {
        animation: ikra-pair-piece linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 70%;
    }

    .process-strip::after {
        animation: ikra-process-wipe linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
    }

    .firing-line__heat {
        animation: ikra-firing-heat linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 80%;
    }
}

@supports not (animation-timeline: view()) {
    .storefront .product-card,
    .collection-page .product-card,
    .product-page .product-card {
        animation: ikra-settle 0.72s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
        animation-delay: calc((var(--card-i, 0) % 6) * 55ms);
    }

    .process-step,
    .philosophy-tile,
    .firing-step,
    .history-voice {
        animation: ikra-settle 0.72s var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)) both;
        animation-delay: calc(var(--step-i, 0) * 70ms);
    }

    .history-page .section-eyebrow::after {
        transform: scaleX(1);
    }

    .process-strip::after {
        opacity: 0;
    }
}

body[data-ui-theme="dark"] .storefront .product-card__media,
body[data-ui-theme="dark"] .collection-page .product-card__media,
body[data-ui-theme="dark"] .product-page .product-card__media {
    background-color: #3a2e26;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    .kiln-glow,
    .kiln-flame,
    .kiln-heat,
    .ikra-cursor__spark,
    .ikra-cursor.is-piece .ikra-cursor__ring,
    .product-card__media::after,
    .pd-stage::after,
    .history-pair__frame::after,
    .process-step__media::after,
    .storefront .product-card,
    .collection-page .product-card,
    .product-page .product-card,
    .process-step,
    .philosophy-tile,
    .firing-step,
    .history-voice,
    .collection-page .section-title,
    .history-page .section-title,
    .history-page .section-eyebrow::after,
    .history-pair__frame--studio,
    .history-pair__frame--piece,
    .process-strip::after,
    .firing-line__heat {
        animation: none;
    }

    .storefront .product-card,
    .collection-page .product-card,
    .product-page .product-card,
    .storefront .product-card:hover,
    .collection-page .product-card:hover,
    .product-page .product-card:hover,
    .storefront .product-card:has(.product-card__link:focus-visible),
    .collection-page .product-card:has(.product-card__link:focus-visible),
    .product-page .product-card:has(.product-card__link:focus-visible),
    .history-pair__frame,
    .process-step__media,
    .history-voice__photo {
        border-radius: var(--radius-lg, 12px);
        transform: none;
        box-shadow: var(--shadow-card, 0 1px 2px rgba(var(--ink-rgb), 0.05));
        transition: none;
    }

    .storefront .product-card__media::before,
    .collection-page .product-card__media::before,
    .product-page .product-card__media::before,
    .storefront .product-card:hover .product-card__media::before,
    .collection-page .product-card:hover .product-card__media::before,
    .product-page .product-card:hover .product-card__media::before {
        opacity: 0;
        transition: none;
    }

    .ikra-cursor,
    .ikra-cursor__svg,
    .ikra-cursor__glint,
    .ikra-cursor__spark,
    .storefront .product-card__img,
    .collection-page .product-card__img,
    .product-page .product-card__img,
    .pd-stage__img,
    .history-pair__frame img,
    .process-step__media img,
    .history-voice__photo img {
        transition: none;
    }

    .storefront .product-card:hover .product-card__img,
    .collection-page .product-card:hover .product-card__img,
    .product-page .product-card:hover .product-card__img,
    .storefront .product-card__link:focus-visible .product-card__img,
    .collection-page .product-card__link:focus-visible .product-card__img,
    .product-page .product-card__link:focus-visible .product-card__img,
    .pd-stage:hover .pd-stage__img.is-active,
    .history-pair__frame:hover img,
    .process-step__media:hover img,
    .history-voice__photo:hover img {
        -webkit-clip-path: none;
        clip-path: none;
        transform: none;
        filter: none;
    }

    .history-pair__frame--studio,
    .history-pair__frame--piece,
    .storefront .product-card,
    .collection-page .product-card,
    .product-page .product-card,
    .process-step,
    .philosophy-tile,
    .firing-step,
    .history-voice,
    .firing-line__heat {
        opacity: 1;
        transform: none;
    }

    .process-strip::after {
        display: none;
    }
}

@supports not ((clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)) or (-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%))) {
    .storefront .product-card:hover .product-card__img,
    .collection-page .product-card:hover .product-card__img,
    .product-page .product-card:hover .product-card__img {
        transform: scale(1.06);
    }
}

/* Wishlist heart button */
.wl-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(43, 38, 34, 0.14);
    border-radius: 50%;
    background: rgba(255, 252, 248, 0.94);
    color: #8a7a6c;
    cursor: pointer;
    line-height: 0;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wl-heart svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
    transition: fill 0.2s ease;
}
.wl-heart:hover {
    color: #c4493f;
    background: #fff;
    border-color: rgba(196, 73, 63, 0.35);
}
.wl-heart:focus-visible {
    outline: 2px solid #c4493f;
    outline-offset: 2px;
}
.wl-heart.is-saved {
    color: #c4493f;
    border-color: rgba(196, 73, 63, 0.35);
}
.wl-heart.is-saved svg {
    fill: currentColor;
}
.wl-heart.is-pop {
    animation: wl-pop 0.3s ease;
}
@keyframes wl-pop {
    50% { transform: scale(1.22); }
}

/* On product cards: floats over the photo, top-right */
.wl-heart--card {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.wl-heart--card ~ .product-card__quick {
    right: 54px;
}

/* On the product page: sits beside "Añadir al carrito" */
.wl-heart--page {
    width: 48px;
    height: 48px;
    background: #fff;
}
.pd-soldout__actions {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.pd-soldout__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.pd-soldout__link:hover {
    opacity: 0.75;
}

/* Header link */
.wl-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.wl-link__icon {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}
.wl-link.active .wl-link__icon {
    fill: currentColor;
}
.wl-count[hidden] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .wl-heart,
    .wl-heart svg {
        transition: none;
    }
    .wl-heart.is-pop {
        animation: none;
    }
}

/* Wishlist thank-you popover: sits above the heart, never covers the photo */
.wl-thanks {
    position: fixed;
    z-index: 10001;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fffcf8;
    color: #2b2622;
    border: 1px solid rgba(43, 38, 34, 0.1);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.94);
    transform-origin: var(--wl-arrow-x, 50%) 100%;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.wl-thanks.is-below {
    transform: translateY(-8px) scale(0.94);
    transform-origin: var(--wl-arrow-x, 50%) 0;
}
.wl-thanks.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
/* Arrow pointing at the heart */
.wl-thanks::after {
    content: "";
    position: absolute;
    left: var(--wl-arrow-x, 50%);
    bottom: -6px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: #fffcf8;
    border-right: 1px solid rgba(43, 38, 34, 0.1);
    border-bottom: 1px solid rgba(43, 38, 34, 0.1);
    transform: rotate(45deg);
}
.wl-thanks.is-below::after {
    bottom: auto;
    top: -6px;
    border: 0;
    border-left: 1px solid rgba(43, 38, 34, 0.1);
    border-top: 1px solid rgba(43, 38, 34, 0.1);
}
.wl-thanks__heart {
    flex: none;
    margin-top: 1px;
    fill: #c4493f;
}
.wl-thanks.is-visible .wl-thanks__heart {
    animation: wl-thanks-beat 0.9s ease-in-out 0.15s 2;
}
.wl-thanks__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.35;
}
.wl-thanks__title {
    font-size: 0.95rem;
}
.wl-thanks__text {
    color: #6b5f55;
    overflow-wrap: anywhere;
}
.wl-thanks__link {
    margin-top: 4px;
    color: #c4493f;
    font-weight: 600;
    text-decoration: none;
}
.wl-thanks__link:hover {
    text-decoration: underline;
}
@keyframes wl-thanks-beat {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.35); }
    60% { transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .wl-thanks,
    .wl-thanks.is-visible,
    .wl-thanks.is-visible .wl-thanks__heart {
        animation: none;
        transition: none;
        transform: none;
    }
}

/* Wishlist toast (errors) */
.wl-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 10000;
    max-width: min(92vw, 420px);
    padding: 14px 22px;
    border-radius: 999px;
    background: #2b2622;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.wl-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}