/* =====================================================================
   Sections from the standalone design
   =====================================================================

   Every class here is prefixed s- because the design these came from uses
   names the shop already means something else by — .btn, .card, .rail,
   .sec, .im, .tx, .go and .ov all exist with different meanings in
   store.css. Pasting them in unprefixed would have quietly restyled the
   product cards and the bag.

   Colours come from the shop's own variables rather than the ones the
   standalone file defined, so these sections follow the site if its
   palette changes.
   ===================================================================== */

.s-sec { padding: clamp(48px, 7vw, 88px) 0; }
.s-sec-center { text-align: center; }
.s-sec-sand { background: var(--sand, #EFE6D5); }

.s-head { margin-bottom: clamp(24px, 3vw, 38px); }
.s-head-center { text-align: center; }
.s-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.s-head h2 {
    font-family: var(--serif);
    font-size: clamp(21px, 3vw, 32px);
    font-weight: 400;
    line-height: 1.15;
    margin: 6px 0 0;
}

.s-kicker {
    display: block;
    font-family: var(--sans);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 10.5px;
    color: var(--soft, #8A7361);
}

.s-more,
.s-go {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--choc);
    white-space: nowrap;
}
.s-more:hover, .s-go:hover { opacity: .65; }

/* ---- image hero ---------------------------------------------------- */
.s-hero2 { position: relative; min-height: clamp(420px, 62vh, 620px); display: grid; align-items: center; }
.s-hero2-img { position: absolute; inset: 0; }
.s-hero2-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A scrim, because white text over an unknown photograph is a gamble. */
.s-hero2::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(30,20,14,.15) 0%, rgba(30,20,14,.45) 100%);
}
.s-hero2-in { position: relative; z-index: 2; color: #fff; text-align: center; max-width: 620px; }
.s-hero2-in h1 {
    font-family: var(--serif);
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 400;
    line-height: 1.08;
    margin: 12px 0 14px;
}
.s-hero2-in p { font-size: 15px; line-height: 1.65; opacity: .92; margin: 0 auto; max-width: 44ch; }
.s-hero2-in .s-kicker { color: rgba(255,255,255,.85); }
.s-hero2-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ---- round category links ------------------------------------------ */
.s-circ {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: clamp(12px, 2vw, 26px);
}
.s-circ a { display: block; text-align: center; color: var(--choc); }
.s-circ-im {
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sand, #EFE6D5);
    margin-bottom: 10px;
}
.s-circ-im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.s-circ a:hover .s-circ-im img { transform: scale(1.05); }
.s-circ span:last-child {
    font-family: var(--sans);
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---- three image links, one tall ----------------------------------- */
.s-ed-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.s-ed-grid.is-short { grid-template-columns: 1fr; }
.s-ed-col { display: grid; gap: 14px; }

.s-ed { position: relative; display: block; overflow: hidden; background: var(--sand, #EFE6D5); }
.s-ed img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.s-ed:hover img { transform: scale(1.04); }
.s-ed.is-tall { aspect-ratio: 3 / 4; }
.s-ed:not(.is-tall) { aspect-ratio: 16 / 9; }

.s-ed-ov {
    position: absolute;
    inset: auto 0 0 0;
    padding: 22px;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(30,20,14,.6));
}
.s-ed-ov h3 { font-family: var(--serif); font-size: clamp(17px, 2vw, 24px); font-weight: 400; margin: 0 0 6px; }
.s-ed-ov .s-go { color: #fff; }

/* ---- full-width photo with copy over it ---------------------------- */
.s-story { position: relative; min-height: clamp(380px, 55vh, 540px); display: grid; align-items: center; }
.s-story > picture,
.s-story > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-story-scrim { position: absolute; inset: 0; background: rgba(30,20,14,.42); }
.s-story .wrap { position: relative; z-index: 2; }
.s-story-in { max-width: 500px; color: #fff; }
.s-story-in h2 {
    font-family: var(--serif);
    font-size: clamp(23px, 3.4vw, 38px);
    font-weight: 400;
    line-height: 1.12;
    margin: 12px 0 14px;
}
.s-story-in p { font-size: 14.5px; line-height: 1.7; opacity: .92; margin: 0 0 22px; }
.s-story-in .s-kicker { color: rgba(255,255,255,.85); }

/* ---- what we offer -------------------------------------------------- */
.s-exp { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(14px, 2vw, 24px); }
.s-exp-card { text-align: center; }
.s-exp-im { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand, #EFE6D5); margin-bottom: 14px; }
.s-exp-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-exp-tx h3 { font-family: var(--serif); font-size: 18px; font-weight: 400; margin: 0 0 8px; }
.s-exp-tx p { font-size: 13.5px; line-height: 1.65; opacity: .78; margin: 0 0 10px; }

/* ---- reviews -------------------------------------------------------- */
.s-rev { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.s-rev-card { margin: 0; background: var(--paper); text-align: left; }
.s-rev-im { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sand, #EFE6D5); }
.s-rev-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-rev-tx { padding: 16px 18px 20px; }
.s-stars { font-size: 13px; letter-spacing: .1em; color: #C8A24B; margin-bottom: 10px; }
.s-stars-off { opacity: .25; }
.s-rev-tx blockquote { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.s-rev-tx figcaption { font-size: 11.5px; opacity: .6; margin-bottom: 10px; }

/* ---- journal -------------------------------------------------------- */
.s-jour { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.s-jour-card { display: block; color: var(--choc); }
.s-jour-im { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand, #EFE6D5); margin-bottom: 14px; }
.s-jour-im img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.s-jour-card:hover .s-jour-im img { transform: scale(1.04); }
.s-jour-card h3 { font-family: var(--serif); font-size: 19px; font-weight: 400; margin: 0 0 8px; line-height: 1.25; }
.s-jour-card p { font-size: 13.5px; line-height: 1.65; opacity: .78; margin: 0 0 10px; }

/* ---- brand paragraph ------------------------------------------------ */
.s-brand { padding: clamp(48px, 7vw, 88px) 0; text-align: center; background: var(--sand, #EFE6D5); }
.s-brand .wrap { max-width: 680px; }
.s-brand-mk { width: 34px; height: auto; color: var(--choc); margin-bottom: 20px; }
.s-brand p { font-family: var(--serif); font-size: clamp(15px, 1.8vw, 19px); line-height: 1.75; margin: 0 0 18px; }
.s-brand a {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--choc);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

/* ---- newsletter ----------------------------------------------------- */
.s-nl { position: relative; padding: clamp(52px, 8vw, 96px) 24px; text-align: center; overflow: hidden; }
.s-nl.is-flat { background: var(--sand, #EFE6D5); }
.s-nl > picture,
.s-nl > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-nl-scrim { position: absolute; inset: 0; background: rgba(30,20,14,.5); }
.s-nl-in { position: relative; z-index: 2; max-width: 480px; margin: 0 auto; }
.s-nl:not(.is-flat) .s-nl-in { color: #fff; }
.s-nl-in h2 { font-family: var(--serif); font-size: clamp(22px, 3vw, 32px); font-weight: 400; margin: 0 0 12px; }
.s-nl-in p { font-size: 14px; line-height: 1.65; margin: 0 0 20px; opacity: .9; }

.s-nl-form { display: flex; gap: 8px; }
.s-nl-form input {
    flex: 1;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid rgba(255,255,255,.5);
    background: rgba(255,255,255,.12);
    color: inherit;
    font-family: var(--sans);
    font-size: 15px;   /* below this iOS zooms the page on focus */
    border-radius: var(--input-radius, 0);   /* Colours & fonts → Input fields */
}
.s-nl.is-flat .s-nl-form input { border-color: var(--line); background: var(--paper); }
.s-nl-form input::placeholder { color: currentColor; opacity: .6; }
.s-nl-form input:focus { outline: none; border-color: currentColor; }
.s-nl-form button {
    /* Follows Colours & fonts → Buttons: shape, colours and capitals. */
    padding: 13px 24px;
    border: 0;
    border-radius: var(--btn-radius, 0);
    background: var(--btn-bg, var(--choc));
    color: var(--btn-text, var(--paper));
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: var(--btn-track, .14em);
    text-transform: var(--btn-caps, uppercase);
    cursor: pointer;
    white-space: nowrap;
}
.s-nl-form button:hover { background: var(--choc-deep); }
.s-nl-fine { font-size: 11.5px; opacity: .7; margin: 12px 0 0; }

/* ---- narrow --------------------------------------------------------- */
@media (max-width: 720px) {
    .s-ed-grid { grid-template-columns: 1fr; }
    .s-ed.is-tall { aspect-ratio: 4 / 3; }
    .s-head-split { align-items: flex-start; flex-direction: column; gap: 10px; }
    .s-nl-form { flex-direction: column; }
    .s-hero2-cta .cg-btn { width: 100%; }
}