/* ============================================================
   SQUIRE FURNISHINGS — THE THREE SHOP PAGES
   /mablethorpe, /skegness, /outlet (showroom.php)
   ------------------------------------------------------------
   From 12 Nov 2026 these pages are built from the homepage's own parts, all
   of which are in style.css: the top picture (.hero), the dark strip
   (.usp-strip), the headings (.sq-head, .sq-h), the picture tiles (.sq-mosaic)
   and the cards (.sq-pieces). This file is only what the homepage has no part
   for: the heading as an h1, the chips, the drawn cards, the Outlet's form,
   and the map with the hours beside it.
   ============================================================ */
.sh { --sh-hair: rgba(var(--shade), .10); --sh-open: #1d6244; }

/* ---- the top picture: the page's heading is an h1, dressed as the homepage's h2 ---- */
.sh .hero h1 { font-family: var(--font-head), serif; font-weight: 400; color: #fff; line-height: .94; letter-spacing: -.022em; text-wrap: balance; margin: 0 0 26px; max-width: 15ch; font-size: clamp(2.75rem, 6.2vw, 6rem); }
.sh .hero h1 em { font-style: italic; color: inherit; }
.sh .hero-shop b { font-weight: 500; }
/* A shop front is a busier picture than the homepage's room, so the shade
   behind the words is a little deeper here. */
.sh .hero-overlay { background: linear-gradient(100deg, rgba(var(--shade), .88) 0%, rgba(var(--shade), .66) 40%, rgba(var(--shade), .2) 72%, rgba(var(--shade), 0) 100%), radial-gradient(130% 100% at 50% 38%, transparent 44%, rgba(var(--shade), .42)); }
/* The Outlet's picture is its roadside signs, taller than it is wide: frame
   the signs, not the sky above them. */
.sh[data-shop="outlet"] .hero { background-position: 50% 57%; }
.sh[data-shop="skegness"] .hero { background-position: 50% 62%; }
/* Mablethorpe's is the shop front across a car park: when the picture has to
   lose height, it loses sky before it loses the shop. */
.sh[data-shop="mablethorpe"] .hero { background-position: 50% 64%; }
.sh .usp-item { cursor: default; }

/* ---- the picture tiles: four across, one row ---- */
.sh .sq-mosaic .sq-n { white-space: nowrap; }
.sh-plain { background: var(--color-heading); }

/* ---- on the floor today ---- */
.sh-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-chip { font-family: var(--font-body), sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 10px 16px; border: 1px solid rgba(var(--shade), .18); border-radius: 2px; background: transparent; color: var(--color-heading); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.sh-chip small { font-size: 11px; letter-spacing: 0; opacity: .6; margin-left: 6px; font-variant-numeric: tabular-nums; }
.sh-chip[aria-pressed="true"] { background: var(--color-heading); border-color: var(--color-heading); color: var(--bg, #fff); }
.sh-floor-g > h3 { font-family: var(--font-head), serif; font-weight: 400; font-size: 26px; color: var(--color-heading); margin: 26px auto 14px; }
.sh-js .sh-floor-g > h3 { display: none; }
/* The homepage's grid draws its hairlines by letting a grey ground show
   between the cards, which leaves grey squares where a last row is not full.
   Here each card carries its own two hairlines instead. */
.sh-floor .sq-pieces { gap: 0; background: transparent; border-bottom: 0; }
.sh-floor .sq-piece { border-right: 1px solid var(--sh-hair); border-bottom: 1px solid var(--sh-hair); }
.sh-floor .sq-piece-name { margin-top: 0; }
.sh-floor .sq-cat { margin-top: 8px; }
.sh-floor .sq-shot.is-whole { background: #fff; }
.sh-floor .sq-shot.is-whole img { object-fit: contain; padding: 8%; }
.sh-floor .sq-shot.is-drawn { background: var(--bg-white, #fff); display: flex; align-items: center; justify-content: center; }
.sh-floor .sq-shot.is-drawn svg { width: 72%; height: auto; display: block; }
.sh-floor .sq-piece[hidden] { display: none; }
.sh-more { margin: 22px auto 0; font-size: 13.5px; color: var(--text-muted); }
.sh-more a { color: var(--color-heading); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.sh-quiet { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 4px 0 0; }
.sh-quiet p { margin: 0; font-size: 15px; max-width: 58ch; line-height: 1.6; color: var(--color-body); }
.sh-floor { padding-bottom: clamp(8px, 1.4vw, 18px); }

/* ---- the Outlet: the drawing and what we need, beside the form ---- */
.sh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.sh-fit svg { display: block; width: 100%; height: auto; }
.sh-fit ul { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; font-size: 15px; color: var(--color-body); }
.sh-fit li { padding-left: 22px; position: relative; }
.sh-fit li::before { content: ''; position: absolute; left: 0; top: .78em; width: 12px; height: 1px; background: var(--secondary, #9A6B33); }
/* the measuring lines draw themselves when the drawing comes into view */
.sh-draw .sh-ln { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); transition: stroke-dashoffset 1.3s cubic-bezier(.3, .6, .2, 1) .25s; }
.sh-draw .sh-tx { opacity: 0; transition: opacity .6s ease 1.1s; }
.sh-draw.is-in .sh-ln { stroke-dashoffset: 0; }
.sh-draw.is-in .sh-tx { opacity: 1; }
.sh-noscript .sh-ln { stroke-dashoffset: 0; } .sh-noscript .sh-tx { opacity: 1; }

.sh-form { background: var(--bg-white, #fff); border: 1px solid var(--sh-hair); padding: clamp(20px, 2.8vw, 34px); display: flex; flex-direction: column; gap: 14px; }
.sh-form-h { font-family: var(--font-head), serif; font-weight: 400; font-size: clamp(23px, 2.5vw, 31px); letter-spacing: -.01em; color: var(--color-heading); margin: 0 0 4px; }
.sh-form .sh-f { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sh-form label { font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); display: flex; flex-direction: column; gap: 6px; }
.sh-form input[type=text], .sh-form input[type=tel], .sh-form input[type=email], .sh-form select, .sh-form textarea { font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--color-heading); border: 1px solid rgba(var(--shade), .16); background: var(--bg, #fff); height: 44px; padding: 0 12px; border-radius: 2px; width: 100%; }
.sh-form textarea { height: 78px; padding: 10px 12px; resize: vertical; }
.sh-form input:focus, .sh-form select:focus, .sh-form textarea:focus { outline: 2px solid var(--secondary, #9A6B33); outline-offset: 1px; }
.sh-form .sh-tick { flex-direction: row; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--color-body); line-height: 1.5; }
.sh-form .sh-tick input { margin-top: 3px; flex: none; }
.sh-form .sh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sh-form .sh-err { font-size: 12px; letter-spacing: 0; text-transform: none; color: #a3322a; }
.sh-form .sh-msg { font-size: 14px; line-height: 1.55; padding: 12px 14px; border-radius: 2px; }
.sh-form .sh-msg.ok { background: #e8f4ec; color: #1d6244; }
.sh-form .sh-msg.bad { background: #fbeeec; color: #a3322a; }
.sh-form button[disabled] { opacity: .6; cursor: wait; }
.sh-send { align-self: flex-start; cursor: pointer; font-family: var(--font-body), sans-serif; }

/* ---- visit: the map, with the homepage's showroom cell beside it ---- */
.sh-visit { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); border-block: 1px solid var(--sh-hair); background: var(--bg-white, #fff); }
.sh-map { position: relative; min-height: 420px; background: var(--off-white); }
.sh-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.sh-map a.sh-map-link { position: absolute; left: 18px; bottom: 16px; background: rgba(255, 255, 255, .92); font-size: 12px; padding: 6px 11px; border-radius: 2px; color: var(--color-heading); }
.sh-vt { padding: clamp(28px, 3.4vw, 48px) clamp(22px, 3.4vw, 52px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.sh-vt address { font-style: normal; font-size: 15px; line-height: 1.6; color: var(--color-body); }
.sh-vt .sq-tel { font-family: var(--font-head), serif; font-size: clamp(22px, 2.2vw, 28px); color: var(--color-heading); text-decoration: none; }
.sh-vt .sq-visit-now, .sq-visit-now { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.sh-vt .sq-visit-now { margin-top: 0; }
.sq-visit-now i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--shade), .24); flex: none; }
.sq-visit-now.is-open { color: var(--sh-open); }
.sq-visit-now.is-open i { background: var(--sh-open); }
.sh-hrs { display: grid; grid-template-columns: 62px 1fr; gap: 5px 12px; font-size: 14px; margin: 8px 0 6px; font-variant-numeric: tabular-nums; color: var(--color-body); align-self: stretch; max-width: 300px; }
.sh-hrs .td { font-weight: 600; color: var(--color-heading); }
.sh-hrs .cl { color: var(--text-muted); }
.sh-note { font-size: 13px; color: var(--text-muted); margin: 0; }

.sh-inside { display: block; width: 100%; max-height: 70vh; object-fit: cover; }

/* ---- things rise into place as they are reached ---- */
.sh-js .sh-rise { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--d, 0s); }
.sh-js .sh-rise.is-in { opacity: 1; transform: none; }

@media (max-width: 900px) {
    .sh .hero h1 { max-width: 100%; }
    .sh .sq-mosaic { grid-template-columns: repeat(2, 1fr); }
    .sh-two, .sh-visit { grid-template-columns: minmax(0, 1fr); }
    .sh-map { min-height: 300px; }
}
@media (max-width: 600px) {
    .sh .hero h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
    /* 13 Nov 2026: on a phone the words run the full width of the top picture,
       over the part the sideways wash leaves clear. They sat on the shop's own
       sign and could not be read. An even wash, darkest behind the words. */
    .sh .hero-overlay { background: linear-gradient(180deg, rgba(var(--shade), .44) 0%, rgba(var(--shade), .74) 40%, rgba(var(--shade), .74) 68%, rgba(var(--shade), .6) 100%); }
    .sh-form .sh-f { grid-template-columns: minmax(0, 1fr); }
    .sh-chip { padding: 9px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .sh-js .sh-rise { opacity: 1; transform: none; transition: none; }
    .sh-draw .sh-ln { transition: none; stroke-dashoffset: 0; }
    .sh-draw .sh-tx { transition: none; opacity: 1; }
}

/* ============================================================
   THE SHOP ITSELF (13 Nov 2026): the welcome beside its photographs, the
   floor in a mosaic, and one riser recliner in three photographs.
   The homepage's own type and tiles; only the arrangement is here.
   ============================================================ */
.sh-welcome-wrap { padding-top: clamp(56px, 7vw, 104px); }
.sh-welcome { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5.4vw, 92px); align-items: center; }
.sh-welcome-words .sq-h { font-size: clamp(34px, 4.8vw, 62px); }
.sh-welcome-words p { font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.75; color: var(--color-body); max-width: 46ch; margin: 22px 0 0; }
.sh-welcome-words p + p { margin-top: 12px; }
.sh-welcome-go { display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; margin-top: 30px; }
.sh-welcome-pics { position: relative; }
.sh-welcome-pics.has-two { padding: 0 0 11% 9%; }
.sh-welcome-pics img { display: block; width: 100%; object-fit: cover; }
.sh-wp-a { aspect-ratio: 3 / 2; object-position: var(--sh-wp, 50% 50%); }
.sh[data-shop="skegness"] .sh-wp-a { --sh-wp: 88% 50%; }
.sh-wp-b { position: absolute; left: 0; bottom: 0; width: 38% !important; aspect-ratio: 1 / 1; border: clamp(6px, .8vw, 12px) solid var(--off-white, #f1f0ec); box-shadow: 0 18px 44px rgba(var(--shade), .16); }

/* the floor: one big photograph and four beside it, hairlines between, as the homepage's tiles */
.sh-inside { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 20vw, 330px); gap: 1px; background: rgba(var(--shade), .10); border-block: 1px solid rgba(var(--shade), .10); }
.sh-inside .sq-tile { aspect-ratio: auto; min-height: 0; }
.sh-inside .sq-tile:first-child { grid-column: span 2; grid-row: span 2; }
.sh-inside .sq-tile:first-child .sq-tile-meta b { font-family: var(--font-head), serif; font-size: clamp(22px, 2.3vw, 32px); font-weight: 400; letter-spacing: -.01em; }
.sh-inside .sq-tile-meta b { font-size: 15.5px; }
.sh-inside .sq-scrim { height: 60%; }
.sh-inside-3 .sq-tile:first-child { grid-row: span 1; }
.sh-inside-4 .sq-tile:last-child { grid-column: span 2; }

/* one chair, three photographs */
.sh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 34px); padding-bottom: clamp(20px, 3vw, 40px); }
.sh-step { margin: 0; }
.sh-step img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; }
.sh-step figcaption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 14px; padding-top: 16px; border-top: 1px solid rgba(var(--shade), .14); margin-top: 16px; }
.sh-step figcaption i { grid-row: span 2; font-style: normal; font-family: var(--font-head), serif; font-size: 26px; line-height: 1; color: var(--secondary, #9A6B33); }
.sh-step figcaption b { font-family: var(--font-head), serif; font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.1; color: var(--color-heading); }
.sh-step figcaption span { font-size: 14px; line-height: 1.6; color: var(--color-body); }

@media (max-width: 900px) {
    .sh-welcome { grid-template-columns: minmax(0, 1fr); }
    .sh-welcome-pics { order: -1; }
    .sh-inside { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 42vw, 300px); }
    .sh-inside-5 .sq-tile:first-child, .sh-inside-4 .sq-tile:first-child { grid-column: span 2; grid-row: span 1; }
    .sh-inside-4 .sq-tile:last-child { grid-column: span 1; }
}
@media (max-width: 600px) {
    .sh-steps { grid-template-columns: minmax(0, 1fr); }
    .sh-step img { aspect-ratio: 4 / 3; object-position: 50% 18%; }
}