/* Concept 1 revised: white and red, serif display, rich red depth */
@font-face { font-family: 'Fraunces'; src: url(../fonts/fraunces-latin-opsz-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url(../fonts/fraunces-latin-opsz-italic.woff2) format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(../fonts/dm-sans-latin-opsz-normal.woff2) format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
:root {
  /* Crockery Hub brand tokens (1.0.8): brand red for actions and selected states, warm white and cream surfaces,
     soft beige to separate sections, warm charcoal for text. Every storefront component reads these. */
  --red: #D3121C; --red-2: #E8323A; --red-d: #A80E17; --red-tint: rgba(211, 18, 28, .07); --red-soft: #F1EDE6;
  --bg: #FAF8F4; --surface: #FFFEFC; --cream: #F4F1EB; --sand: #E9E4DB; --sand-2: #DAD2C5; --soft: #F2EEE7;
  --ink: #22201D; --ink-2: #46423D; --muted: #75706A; --line: #E5E0D7; --line-2: #D3CCC0; --gold: #A88A5C; --graphite: #22201D;
  --grad-warm: linear-gradient(180deg, #F8F6F2 0%, #EFEBE4 100%);
  --grad-cream: linear-gradient(115deg, #F6F3EE 0%, #F4F1EB 48%, #ECE7DF 100%);
  --grad-red: linear-gradient(120deg, #DC1A23 0%, #C3101A 52%, #9C0C14 100%);
  --redgrad: var(--grad-red);
  --f-head: 'Fraunces', Georgia, 'Times New Roman', serif; --f-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r-xl: 20px; --r-lg: 16px; --r-btn: 8px; --r-field: 8px; --r-tile: 12px; --r-card: 14px;
  --shadow-1: 0 1px 2px rgba(40, 36, 32, .06), 0 8px 22px -14px rgba(40, 36, 32, .22);
  --shadow-2: 0 2px 4px rgba(40, 36, 32, .06), 0 22px 40px -22px rgba(40, 36, 32, .32);
}
body { font-size: 15.5px; background: var(--bg); }
body::before { background: radial-gradient(900px 460px at 95% -120px, rgba(211, 18, 28, .055), transparent 70%); height: 560px; }
h1, h2, h3 { font-family: var(--f-head); font-weight: 420; letter-spacing: -.018em; font-optical-sizing: auto; }
.sh h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); font-weight: 400; }
.sh--center { justify-content: center; text-align: center; }
.sh--center .eyebrow { justify-content: center; }
.eyebrow { color: var(--red); }
.btn { font-weight: 600; }
.btn--primary { background: linear-gradient(135deg, #EA2A33 0%, #CD111B 60%, #B20E17 100%); box-shadow: 0 12px 26px -12px rgba(211, 18, 28, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--primary:hover { box-shadow: 0 18px 32px -12px rgba(211, 18, 28, .75), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--outline { border: 1.5px solid var(--line-2); color: var(--ink); background: var(--surface); }
.btn--outline:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.btn--dark { background: var(--ink); }
.m-ann { background: linear-gradient(90deg, #B80F18, #D3121C 50%, #B80F18); color: #fff; font-size: .74rem; letter-spacing: .04em; }
.m-ann__in { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.m-ann__in p span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 254, 252, .75); margin: 0 12px 2px; }
.m-ann__in a { border-bottom: 1px solid rgba(255, 255, 255, .5); }
.hdr { background: rgba(255, 254, 252, .94); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hdr.is-stuck { background: rgba(255, 254, 252, .9); box-shadow: 0 1px 0 var(--line), 0 10px 30px -18px rgba(0, 0, 0, .25); }
.logo__word { font-family: var(--f-head); font-size: 1.5rem; letter-spacing: -.02em; gap: .26em; }
.logo__word span { font-weight: 500; }
.logo__word b { font-weight: 600; color: var(--red); }
.nav__btn, .nav__link { font-size: .9rem; font-weight: 500; color: var(--ink); }
.nav__btn::after, .nav__link::after { background: var(--red); }
.nav__link--sale { color: var(--red); }
.search input { background: var(--soft); border: 1px solid var(--line); }
.mega__in { background: rgba(255, 254, 252, .98); }
.mega__thumb { background: linear-gradient(180deg, #F7F4EF, #ECE7DE); border-radius: 12px; }
.mega__feature { background: var(--redgrad); }
.mega__feature::after { display: none; }
.mega__prod { position: absolute; right: -8%; bottom: -10%; width: 72%; transition: transform .8s var(--ease); }
.mega__prod img { width: 100%; height: auto; filter: drop-shadow(0 20px 22px rgba(80, 0, 5, .4)); }
.mega__feature:hover .mega__prod { transform: scale(1.05) translateY(-4px); }
.mega__ft b { font-family: var(--f-head); font-size: 1.45rem; font-weight: 450; }
.intro { background: radial-gradient(90% 70% at 50% 42%, #FFFFFF 0%, #F8F5F0 70%, #EFEBE4 100%); color: var(--ink); }
.intro__glow { background: radial-gradient(circle closest-side, rgba(211, 18, 28, .16), rgba(211, 18, 28, 0)); }
.intro__ring { stroke: var(--red); } .intro__ring2 { stroke: var(--ink); stroke-opacity: .2; } .intro__dot { fill: var(--red); }
.intro__word { font-family: var(--f-head); font-size: 2.3rem; gap: .26em; } .intro__word span { font-weight: 450; } .intro__word b { color: var(--red); font-weight: 600; }
.intro__tag { color: var(--muted); } .intro__bar { background: rgba(21, 21, 21, .08); } .intro__bar i { background: linear-gradient(90deg, var(--red-d), var(--red-2)); }
.tone-warm, .tone-cool, .tone-slate, .tone-blush { background: linear-gradient(180deg, #F8F6F2 0%, #E9E4DB 100%); }
.pcard__media { aspect-ratio: 4 / 4.5; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
.pcard:hover .pcard__media { box-shadow: inset 0 0 0 1px rgba(211, 18, 28, .25), 0 26px 46px -26px rgba(120, 10, 15, .35); }
.pcard__media::after { background: radial-gradient(60% 45% at 50% 30%, rgba(255, 255, 255, .9), transparent 72%); }
.pcard__name { font-family: var(--f-head); font-size: 1.06rem; font-weight: 450; }
.pcard__cat { color: var(--red); letter-spacing: .14em; }
.price__now { font-weight: 700; }
.pcard__quick { background: rgba(21, 21, 21, .92); }
.pcard__quick:hover { background: var(--red); }
.tag--new { background: var(--surface); }
.seg { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.seg__ink { background: var(--red); box-shadow: 0 8px 18px -8px rgba(211, 18, 28, .7); }
.ftr { background: radial-gradient(120% 140% at 10% 0%, #C8121B 0%, #9A0B12 55%, #6E070C 100%); color: rgba(255, 255, 255, .78); }
.ftr .logo__mark circle:first-child, .ftr .logo__mark circle:last-child { stroke: #fff; fill: none; }
.ftr .logo__mark circle:last-child { fill: #fff; }
.ftr .logo__word span { color: #fff; } .ftr .logo__word b { color: #FFD3D5; }
.ftr__col h2 { color: rgba(255, 255, 255, .6); } .ftr__col a:hover { color: #fff; }
.ftr__wa { background: rgba(255, 255, 255, .14); }
.ftr__base { border-top-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .62); }
.pdp__title { font-family: var(--f-head); font-weight: 420; font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.pdp__price .price__now { font-family: var(--f-head); font-weight: 500; color: var(--red); }
.gal__stage { box-shadow: inset 0 0 0 1px var(--line); }
.contact__side h1 { font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.9rem); }
.method--wa { background: var(--redgrad); }
.method--wa .method__txt small, .method--wa .method__go { color: rgba(255, 255, 255, .8); }
.shop__hero { background: var(--redgrad); min-height: clamp(200px, 22vw, 270px); }
.shop__shade { display: none; }
.shop__hero-art { position: absolute; right: 2%; top: 0; bottom: 0; width: 48%; pointer-events: none; }
.shop__hero-art::before { content: ""; position: absolute; right: 8%; top: 50%; width: 70%; aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 0 0 30px rgba(255, 255, 255, .04), 0 0 0 31px rgba(255, 255, 255, .12); }
.sa { position: absolute; display: block; animation: heroIn 1.2s var(--ease) both; }
.sa img { width: 100%; height: auto; filter: drop-shadow(0 24px 24px rgba(70, 0, 5, .4)); }
.sa--1 { right: 2%; bottom: -8%; width: 52%; }
.sa--2 { right: 44%; top: 4%; width: 36%; animation-delay: .15s; }
.bnav { background: rgba(255, 254, 252, .95); }
@media (max-width: 720px) {
  .m-ann__in { justify-content: center; height: 30px; font-size: .7rem; }
  .m-ann__in a, .m-ann__in p span:nth-child(2) { display: none; }
  .shop__hero-art { width: 52%; right: -4%; opacity: .95; }
  .shop__hero-in { max-width: 60%; }
}

/* ===== v1.0.3 layout fixes ===== */
/* Laptops and tablets in landscape (901 to 1180px): the full menu, a search field and the icons did not fit in one row
   (the cart icon was pushed off screen at 1024px). The search becomes the icon button used on phones, opening a field under the header. */
@media (min-width: 901px) and (max-width: 1180px) {
  .hdr__bar { gap: 14px; }
  .search { display: none; position: absolute; top: calc(100% + 6px); right: var(--gutter); width: min(420px, 60vw); }
  .search:focus-within { width: min(420px, 60vw); }
  .hdr.is-search .search { display: block; animation: pop .3s var(--ease); }
  .hdr__search-toggle { display: inline-grid; }
  .hdr__bar { position: relative; }
  .nav__btn, .nav__link { padding-inline: 10px; }
}
/* Small Android phones (360px and narrower): logo and the three icons overflowed by 8px, pushing the cart off screen */
@media (max-width: 380px) {
  .logo__word { font-size: 1.22rem; }
  .logo .logo__mark { width: 25px; height: 25px; }
  .logo { gap: 7px; }
  .hdr__bar .icon-btn { width: 40px; height: 40px; }
  .hdr__tools { gap: 0; }
}

/* ===== v1.0.3 finish: same layout and colours, quieter details =====
   Red is kept for actions, prices on offer and the brand; glows and gradients that read as decoration are toned down. */
body::before { display: none; }
.btn--primary { background: var(--red); box-shadow: 0 1px 2px rgba(21, 21, 21, .12); }
.btn--primary:hover { background: var(--red-d); box-shadow: 0 6px 16px -8px rgba(21, 21, 21, .35); }
.btn--primary, .btn--outline, .btn--light, .btn--line-light { transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.btn--outline:hover, .btn--light:hover, .btn--line-light:hover { transform: none; }
.eyebrow { letter-spacing: .12em; font-size: .7rem; }
.eyebrow::before { display: none; }
.pcard__cat { color: var(--muted); letter-spacing: .1em; font-weight: 600; }
.pcard:hover .pcard__media { box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 34px -24px rgba(21, 21, 21, .28); }
.w-hero__stage { box-shadow: 0 1px 2px rgba(21, 21, 21, .06), 0 40px 70px -48px rgba(21, 21, 21, .35); }
.w-dept--crockery { box-shadow: none; }
.w-dept:hover, .w-col:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 34px -24px rgba(21, 21, 21, .25); }
.w-dept__txt small { letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: .78rem; }
.w-col__txt small { letter-spacing: .02em; text-transform: none; font-size: .74rem; }
.w-col__txt em { box-shadow: none; }
.w-col:hover .w-col__txt { box-shadow: none; }
.m-band { box-shadow: none; }
.seg__ink { box-shadow: none; }
.acct__tabs a.is-on { box-shadow: none; }
.ord__hero { box-shadow: none; }
@media (max-width: 720px) { .w-col__txt small { font-size: .68rem; } }
/* warm cream left over from an earlier concept, replaced with the white/grey of the approved design */
.toolbar { background: rgba(250, 248, 244, .96); }
.sheet__foot--cart, .filters__foot { background: var(--soft); }
.btn--light:hover { background: #F2EEE7; }

/* ===== v1.0.4: products in rows, not sliders ===== */
/* Favourites, New arrivals and "You may also like" are grids: 4 per row on computers and tablets, 2 per row on phones. */
.rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 6px 0 4px; }
.rail > * { min-width: 0; flex: none; }
.rail-bar, .arrows { display: none !important; }
@media (max-width: 760px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } }

/* ===== v1.0.4: phone layout ===== */
@media (max-width: 900px) {
  /* departments: one under the other, text beside the picture (no sideways swiping) */
  .w-depts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: visible; scroll-snap-type: none; margin-inline: 0; padding: 0; }
  .w-dept { min-height: 188px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); border-radius: 20px; }
  .w-dept__txt { padding: 20px 0 20px 20px; gap: 6px; }
  .w-dept__txt h3 { font-size: 1.5rem; }
  .w-dept__txt p { font-size: .82rem; }
  .w-dept__art { height: auto; }
  .da--1 { right: -16%; bottom: 10%; width: 122%; }
  .da--2 { right: 26%; top: 10%; width: 70%; }
}
@media (max-width: 720px) {
  /* categories: 3 per row, picture with the name underneath, rows start on the left */
  .w-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; justify-content: stretch; }
  .w-col { aspect-ratio: auto; display: flex; flex-direction: column; border-radius: 16px; background: #F4F1EB; box-shadow: inset 0 0 0 1px var(--line); }
  .w-col::before { display: none; }
  .w-col:hover { transform: none; }
  .w-col__img { position: relative; inset: auto; z-index: 0; aspect-ratio: 1; }
  .w-col__img img { position: absolute; inset: 0; padding: 12%; object-position: 50% 50%; }
  .w-col__txt, .w-col:hover .w-col__txt { position: static; display: block; padding: 0 8px 10px; border-radius: 0; background: none; box-shadow: none; translate: none; text-align: center; }
  .w-col__txt b, .w-col:hover .w-col__txt b { display: block; font-size: .78rem; line-height: 1.25; color: var(--ink); }
  .w-col__txt small, .w-col:hover .w-col__txt small { display: block; margin-top: 2px; font-size: .62rem; letter-spacing: .04em; color: var(--muted); }
  .w-col__txt em { display: none; }
}

/* ===== v1.0.4: smooth scrolling on phones =====
   Measured on a throttled phone: the endless "float" on the hero picture, frosted-glass blur on fixed bars and
   labels, and drop shadows drawn on every picture made scrolling drop to about 20 frames a second. */
@media (max-width: 900px), (hover: none) {
  *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .hdr, .hdr.is-stuck, .bnav, .buybar, .co__bar, .toolbar { background-color: #fff; }
  .ha--front img, .hero__scene, .hero__orbit { animation: none; }
  .w-col__img img, .da img { filter: none; }
  .m-marquee__track { will-change: transform; }
}

/* ===== v1.0.4: product cards line up: names take two lines at most, so prices sit level across each row ===== */
.pcard__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 1.3; min-height: 2.6em; }
@media (max-width: 760px) { .pcard__name { font-size: .98rem; } .pcard__cat { font-size: .62rem; } }

/* ===== v1.0.6: storefront finish ===== */
/* Hero trust points: one even row of three (they wrapped two plus one) */
.w-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.w-hero__facts li { gap: 10px; }
.w-hero__facts li::after { font-size: .82rem; line-height: 1.25; }
.w-hero__facts svg { width: 34px; height: 34px; padding: 8px; }
/* product cards: calmer, more even details */
.pcard__body { padding-top: 12px; }
.pcard .price { margin-top: 6px; }
.price__now { letter-spacing: -.01em; }
.pdp__title { line-height: 1.12; }

/* Phones and small tablets: compact header, logo beside the menu button, comfortable tap targets */
@media (max-width: 900px) {
  :root { --hdr-h: 56px; }
  .hdr__bar { grid-template-columns: auto 1fr auto; gap: 0 4px; }
  .hdr__menu { margin-left: -10px; }
  .logo { justify-self: start; gap: 8px; }
  .logo .logo__mark { width: 26px; height: 26px; }
  .logo__word { font-size: 1.32rem; }
  .hdr__tools { gap: 0; margin-right: -10px; }
  .hdr__bar .icon-btn { width: 42px; height: 42px; }
  .hdr__bar .icon-btn svg { width: 21px; height: 21px; }
  .hdr .badge { right: 2px; top: 3px; min-width: 17px; height: 17px; font-size: .62rem; }
  .m-ann__in { height: 28px; }
}
@media (max-width: 380px) {
  .logo__word { font-size: 1.18rem; }
  .logo .logo__mark { width: 23px; height: 23px; }
  .hdr__bar .icon-btn { width: 40px; height: 40px; }
}

/* Phone hero: headline and buttons first, so "Shop" is on the first screen above the bottom bar; then the trust row and the picture */
@media (max-width: 900px) {
  .w-hero { padding-top: 22px; }
  .w-hero__grid { gap: 22px; }
  .w-hero__stage { order: 0; aspect-ratio: 1.3; border-radius: 24px; }
  .w-hero__copy .m-kicker { font-size: .66rem; letter-spacing: .14em; }
}
@media (max-width: 720px) {
  .w-hero__h { font-size: clamp(2.05rem, 9.4vw, 2.6rem); line-height: 1.04; margin: 10px 0 12px; }
  .w-hero__lead { font-size: .95rem; line-height: 1.55; }
  .w-hero__cta { margin-top: 18px; gap: 10px; flex-wrap: nowrap; }
  .w-hero__cta .btn { flex: 1 1 0; min-width: 0; height: 50px; padding: 0 12px; font-size: .92rem; white-space: nowrap; }
  .w-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; padding-top: 0; border-top: 0; }
  .w-hero__facts li { flex-direction: column; justify-content: flex-start; text-align: center; gap: 6px; padding: 10px 6px; border-radius: 14px; background: var(--soft); }
  .w-hero__facts li::after { font-size: .72rem; font-weight: 600; }
  .w-hero__facts svg { width: 30px; height: 30px; padding: 7px; background: var(--surface); }
  .w-hero__badge { display: none; }
  .w-hero__card { left: 10px; right: 10px; bottom: 10px; gap: 10px; padding: 8px 10px 8px 8px; border-radius: 16px; }
  .w-hero__card .hcard__thumb { width: 50px; height: 50px; border-radius: 12px; }
  .w-hero__card .hcard__txt b { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .w-hero__card .hcard__txt small { font-size: .6rem; margin-bottom: 1px; }
  .w-hero__card .hcard__go { width: 34px; height: 34px; }
}