/* =====================================================================
   Coconut girl — homepage sections

   Loaded on index.php only, after store.css and store-shop.css.
   Built on the same tokens; adds two band colours the earlier design
   did not have.
   ===================================================================== */

:root {
    --blush: #F7D9DC;   /* hair claw band */
    --slate: #6C7F8E;   /* fine jewellery band */
    --white: #FFFFFF;
}

/* ---------------------------------------------------------------------
   Hero carousel

   One slide at a time, full width, cross-faded. Fade rather than a
   horizontal slide because the images are photographs of different
   subjects — sliding them past each other reads as a filmstrip, fading
   reads as a change of subject.

   Every slide is in the DOM at full opacity: only the active one is
   visible, so the browser has already decoded the next image before it
   is needed and the change is instant.
   --------------------------------------------------------------------- */
.hero {
    position: relative;
    height: clamp(460px, 72vh, 760px);
    background: var(--sand);
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .9s ease;
    pointer-events: none;
}
.hero-slide.on { opacity: 1; pointer-events: auto; }

/* Descendant, not child: picture() wraps the image in <picture>, so the
   <img> is a grandchild here. With "> img" the sizing never applied and
   the image fell back to its width attribute — 1500px on a 1900px screen,
   leaving a strip of background down the right edge. */
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 32%;
}

/* A slow drift on the active slide keeps a still photograph from looking
   frozen while the copy is being read. */
.hero-slide.on img { animation: heroDrift 12s ease-out forwards; }
@keyframes heroDrift {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

/* Scrim, so white type survives a bright sky or a pale swimsuit. */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(30, 18, 10, .30) 0%,
        rgba(30, 18, 10, .12) 38%,
        rgba(30, 18, 10, .46) 100%
    );
}

.hero-copy {
    position: absolute;
    inset: 0;
    z-index: 2;

    /* Flex, not grid with justify-items: center.
       That combination sizes the column to max-content, and a percentage
       width has nothing definite to resolve against inside one — so
       .eyebrow's width:100% computed to auto, the box shrank to its own
       text, and sat at the left edge of .inner while the headline filled
       the width and looked centred. That was the bug.
       Here .inner is a flex item whose width resolves against the frame,
       so every child has a definite 560px to centre within. */
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    color: #fff;
    padding: 24px;
}

.hero-copy .inner {
    width: 100%;
    max-width: 560px;
    text-align: center;
}

.hero-copy .eyebrow {
    font-family: var(--sans);
    font-size: var(--type-hero-eyebrow-size, 10.5px);
    font-weight: var(--type-hero-eyebrow-weight, 400);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);

    margin: auto;
    padding: 8px;
    width: 100%;
    text-align: center;

    /* Letter-spacing is added after the last character too and counted
       when centring, so wide-tracked uppercase sits half a space to the
       left without this. */
    text-indent: .24em;
}
.hero-copy h1,
.hero-copy h2 {
    font-family: var(--serif);
    /* Eased down from 4.6vw/58px: Montserrat sets about 16% wider than the
       Jost this replaced, so the old ceiling wrapped "Crafted for
       Everyday" onto two lines on a laptop. */
    /* The ceiling is editable; the floor and the rate of change are not,
       because those are what stop a long headline wrapping on a phone. */
    font-size: clamp(28px, 4vw, var(--type-hero-heading-size, 50px));
    font-weight: var(--type-hero-heading-weight, 400);
    letter-spacing: -.005em;
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: .01em;
    margin: 0 0 16px;
    color: #fff;
}
.hero-copy p {
    font-size: var(--type-hero-body-size, 15px);
    font-weight: var(--type-hero-body-weight, 400);
    line-height: 1.7;
    margin: 0 auto 26px;
    max-width: 42ch;
    color: rgba(255, 255, 255, .94);
}

/* ---- Controls ---- */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .25s ease, background .2s ease;
}
.hero:hover .hero-nav,
.hero-nav:focus-visible { opacity: 1; }
.hero-nav:hover { background: rgba(255, 255, 255, .3); }
.hero-nav.prev { left: clamp(12px, 3vw, 40px); }
.hero-nav.next { right: clamp(12px, 3vw, 40px); }

.hero-dots {
    position: absolute;
    left: 0; right: 0;
    bottom: clamp(20px, 3.5vh, 34px);
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 9px;
}
.hero-dots button {
    width: 34px;
    height: 3px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .42);
    cursor: pointer;
    transition: background .25s ease;
}
.hero-dots button[aria-current="true"] { background: #fff; }

@media (max-width: 620px) {
    .hero { height: clamp(420px, 68vh, 560px); }
    .hero-nav { display: none; }
    .hero-copy p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .hero-slide.on img { animation: none; }
}

/* ---------------------------------------------------------------------
   Hair claws — looping carousel on a fixed blush band

   The band colour stays put. Only the product moves, which keeps the
   section calm and stops the page flashing as you browse the range.
   --------------------------------------------------------------------- */
.claws {
    background: var(--blush);
    color: var(--choc);
    padding: 56px 0 60px;
    overflow: hidden;
}

.claws .sec-title { color: inherit; }

/* ---- Stage ---- */
.claw-stage {
    position: relative;
    margin: 26px 0 4px;
    /* Slide width and gutter drive every measurement in the JS.
       Wider slides mean fewer visible at once, so a short catalogue does
       not show the same clip twice across one screen. */
    --claw-w: clamp(220px, 28vw, 380px);
    --claw-gap: clamp(20px, 4vw, 64px);
}

.claw-track {
    display: flex;
    gap: var(--claw-gap);
    will-change: transform;
    align-items: center;
    min-height: calc(var(--claw-w) * .78);
}

.claw {
    flex: 0 0 var(--claw-w);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: .5;
    transform: scale(.74);
    transition: transform .55s cubic-bezier(.34, .01, .2, 1), opacity .45s ease;
    filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .22));
}
.claw img { width: 100%; height: auto; display: block; pointer-events: none; }
.claw:hover { opacity: .74; }

.claw.is-active {
    opacity: 1;
    transform: scale(1);
    cursor: default;
}

/* ---- Arrows ---- */
.claw-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    z-index: 4;
    opacity: .55;
    transition: opacity .2s ease, background .2s ease;
}
.claw-nav:hover { opacity: 1; background: rgba(255, 255, 255, .45); }
.claw-nav.prev { left: clamp(10px, 4vw, 54px); }
.claw-nav.next { right: clamp(10px, 4vw, 54px); }

/* ---- Detail block ---- */
.claw-detail {
    text-align: center;
    max-width: 380px;
    margin: 0 auto;
    color: inherit;
}
.claw-detail h3 {
    font-family: var(--serif);
    font-size: clamp(21px, 2.4vw, 28px);
    font-weight: 400;
    letter-spacing: .02em;
    margin: 0 0 7px;
    color: inherit;
}
.claw-detail .way {
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .85;
    margin: 0 0 10px;
}
.claw-detail .blurb {
    font-size: 13.5px;
    line-height: 1.6;
    opacity: .9;
    margin: 0 0 20px;
}

/* Label left, price right — the split button from the reference */
.claw-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding: 14px 22px;
    background: var(--choc);
    color: var(--paper);
    border: 1px solid var(--choc);
    border-radius: var(--btn-radius, 0);   /* Colours & fonts → button shape */
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.claw-buy:hover { background: transparent; color: var(--choc); }
.claw-buy[disabled] { opacity: .5; cursor: not-allowed; }
.claw-buy .amount { letter-spacing: .06em; }

.claw-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.claw-more:hover { opacity: .75; }

.claw-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 22px; padding: 0 16px; }
.claw-dots button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 50%;
    background: currentColor;
    opacity: .32;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}
.claw-dots button[aria-current="true"] { opacity: 1; transform: scale(1.25); }

/* ---------------------------------------------------------------------
   Category tiles
   --------------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.tile {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--sand);
    aspect-ratio: 4 / 5;
}
.tile picture, .tile img { width: 100%; height: 100%; display: block; }
.tile img {
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.tile:hover img { transform: scale(1.04); }

/* A scrim, not a text-shadow. White type over pale beads was unreadable
   however heavy the shadow. */
.tile::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(30, 18, 10, .62), rgba(30, 18, 10, 0));
    pointer-events: none;
}

.tile-label {
    position: absolute;
    left: 20px; right: 20px; bottom: 20px;
    color: #fff;
    z-index: 1;
}
.tile-label strong {
    display: block;
    font-family: var(--sans);
    font-size: 14px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 5px;
}
.tile-label span {
    font-family: var(--sans);
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    opacity: .85;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding-bottom: 2px;
}

/* ---------------------------------------------------------------------
   Feature split — image beside copy
   --------------------------------------------------------------------- */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* No max-height on the grid: capping a grid does not shrink its
       children, anything taller just overflows onto the section below.
       The image column carries the height instead, and the copy column
       stretches to match it. */
    overflow: hidden;
}

.feature .shot {
    background: var(--sand);
    overflow: hidden;

    /* A fixed height, not an aspect ratio.
       aspect-ratio: 4/5 with max-height: 680px meant the height cap was
       also setting the width — 680 x 4/5 = 544px — so the picture filled
       only two thirds of its column and left a band of background beside
       it. Height alone lets the image take the full column width and crop
       vertically instead. */
    height: clamp(420px, 46vw, 680px);
}
.feature .shot picture { display: block; width: 100%; height: 100%; }
.feature .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.feature .copy {
    background: var(--white);
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; text-align: center;
    padding: clamp(32px, 5vw, 72px);
}
.feature .copy .kicker { color: rgba(81,54,37,.62); margin-bottom: 14px; }
.feature .copy h2 {
    font-family: var(--serif);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 16px;
}
.feature .copy p { max-width: 36ch; font-size: 14.5px; line-height: 1.7; opacity: .82; margin: 0 0 26px; }

/* ---------------------------------------------------------------------
   Fine jewellery band
   --------------------------------------------------------------------- */
.fine { background: var(--slate); color: #fff; padding: 48px 0; }
.fine-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: 40px; align-items: center; }

.fine h2 {
    font-family: var(--sans);
    font-size: 19px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    margin: 0 0 12px; color: #fff;
}
.fine p { font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,.86); margin: 0 0 20px; max-width: 40ch; }

.fine-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fine-card { text-align: center; }
.fine-card .shot {
    background: var(--white);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 2px;
}
.fine-card .shot picture, .fine-card .shot img { width: 100%; height: 100%; display: block; }
.fine-card .shot img { object-fit: contain; padding: 10%; }
.fine-card:hover .shot { box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .45); }
.fine-card span {
    display: block; margin-top: 10px;
    font-family: var(--sans); font-size: 10px;
    letter-spacing: .12em; text-transform: uppercase; color: #fff;
}

/* ---------------------------------------------------------------------
   Wide banner
   --------------------------------------------------------------------- */
.banner { position: relative; }
.banner-frames { display: grid; grid-template-columns: 1fr 1fr; }
.banner-frames figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.banner-frames img { width: 100%; height: 100%; object-fit: cover; }

.banner-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.banner-card {
    border: 1px solid rgba(255,255,255,.6);
    padding: clamp(26px, 4vw, 48px) clamp(28px, 6vw, 76px);
    text-align: center;
    color: #fff;
    background: rgba(30, 20, 14, .1);
    backdrop-filter: blur(1px);
}
.banner-card h2 {
    font-family: var(--sans);
    font-size: clamp(20px, 2.8vw, 30px);
    font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    margin: 0 0 12px; color: #fff;
}
.banner-card p { font-size: 14px; margin: 0 0 20px; max-width: 40ch; color: rgba(255,255,255,.93); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
    .fine-inner { grid-template-columns: 1fr; gap: 26px; }
    .feature { grid-template-columns: 1fr; }
    .feature .shot { height: clamp(300px, 62vw, 420px); }
    .tiles { grid-template-columns: 1fr; }
    .sec { padding: 44px 0; }
}

@media (max-width: 620px) {
    /* Three hero frames become one — cropping three portraits into a phone
       width leaves nothing legible in any of them. */
    .banner-frames { grid-template-columns: 1fr; }
    .banner-frames figure:nth-child(2) { display: none; }
    .cg-rail > * { flex-basis: 62vw; }
    .fine-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .rail-arrow { display: none; }
    .claw-stage { --claw-w: 62vw; --claw-gap: 12px; }
    .claw-nav { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .claw, .tile img, .pc-media img, .claw-track { transition: none !important; }
    .cg-rail { scroll-behavior: auto; }
}

/* Variant dots on a card show the colour and swap the photo. Gallery dots
   stay neutral grey — they are positions, not choices. */
.pc-dots--variant button {
    width: 13px;
    height: 13px;
    border: 1px solid rgba(81, 54, 37, .22);
    box-shadow: 0 0 0 0 var(--choc);
    transition: box-shadow .16s ease;
}
.pc-dots--variant button[aria-current="true"] {
    box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--choc);
}

/* Image on the right instead of the left — a per-section setting. */
.feature.is-flipped .shot { order: 2; }
.feature.is-flipped .copy { order: 1; }
@media (max-width: 900px) {
    .feature.is-flipped .shot, .feature.is-flipped .copy { order: initial; }
}