/* IkkatHub home page. Every rule is scoped under .ihh (the home page wrapper). */
.ihh {
  --h-bg: var(--ih-bg, #FBF7F1);
  --h-surface: var(--ih-surface, #FFFFFF);
  --h-ink: var(--ih-ink, #23171B);
  --h-soft: var(--ih-ink-soft, #5A4A50);
  --h-line: var(--ih-line, #EBE2DA);
  --h-pink: var(--ih-pink, #B8326F);
  --h-pink-deep: var(--ih-pink-deep, #8E2154);
  --h-wine: var(--ih-wine, #4A1230);
  --h-gold: var(--ih-gold, #A9822F);
  --h-wa: var(--ih-wa, #128C7E);
  --h-serif: var(--ih-serif, 'Playfair Display', Georgia, serif);
  --h-sans: var(--ih-sans, 'Jost', 'Public Sans', system-ui, sans-serif);
  background: var(--h-bg);
  color: var(--h-ink);
  font-family: var(--h-sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
}
.ihh *, .ihh *::before, .ihh *::after { box-sizing: border-box; }
.ihh img { display: block; max-width: 100%; }
.ihh a { color: inherit; text-decoration: none; }
.ihh h1, .ihh h2 { font-family: var(--h-serif); color: var(--h-ink); font-weight: 600; margin: 0; letter-spacing: 0; }
.ihh h2 { font-size: 24px; line-height: 1.2; }
.ihh p { margin: 0; }
.ihh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.ihh-eyebrow { display: block; color: var(--h-gold); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
.ihh a.ihh-link { color: var(--h-pink-deep); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.ihh a.ihh-link:hover { color: var(--h-pink); text-decoration: underline; }

/* Buttons */
.ihh-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ihh a.ihh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 14px; border-radius: 4px; font-size: 16px; font-weight: 600; line-height: 1.2; border: 1.5px solid transparent; transition: background-color .15s, color .15s, border-color .15s; flex: 1 1 auto; text-align: center; }
.ihh a.ihh-btn-primary { background: var(--h-pink); color: #fff; border-color: var(--h-pink); }
.ihh a.ihh-btn-primary:hover { background: var(--h-pink-deep); border-color: var(--h-pink-deep); color: #fff; }
.ihh a.ihh-btn-outline { background: transparent; color: var(--h-ink); border-color: var(--h-ink); }
.ihh a.ihh-btn-outline:hover { background: var(--h-ink); color: #fff; }
.ihh a.ihh-btn-wa { background: var(--h-wa); color: #fff; border-color: var(--h-wa); }
.ihh a.ihh-btn-wa:hover { filter: brightness(1.08); color: #fff; }
.ihh a.ihh-btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.ihh a.ihh-btn-light:hover { background: #fff; color: var(--h-wine); }
.ihh a.ihh-btn:focus-visible, .ihh a:focus-visible { outline: 2px solid var(--h-gold); outline-offset: 2px; }

/* 1. Hero */
.ihh-hero { background: var(--h-bg); }
.ihh-hero-img { height: 52vh; min-height: 300px; max-height: 560px; overflow: hidden; background: #2a2326; }
.ihh-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ihh-hero-text { padding: 18px 16px 22px; }
.ihh h1 { font-size: 28px; line-height: 1.15; margin-bottom: 10px; }
.ihh-hero-text p { color: var(--h-soft); font-size: 16px; margin-bottom: 16px; max-width: 34em; }

/* 2. Trust strip */
.ihh-trust { background: var(--h-surface); border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); }
.ihh-trust ul { list-style: none; margin: 0 auto; padding-top: 14px; padding-bottom: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.ihh-trust li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.35; color: var(--h-ink); }
.ihh-trust svg { flex: 0 0 26px; width: 26px; height: 26px; fill: none; stroke: var(--h-pink-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Sections */
.ihh-sec { padding: 32px 0; }
.ihh-sec-tight { padding-top: 8px; }
.ihh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ihh-more { margin-top: 6px; text-align: center; }

/* 3/7. Product cards */
.ihh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
.ihh a.ihh-card { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ihh-card-img { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--h-line); border-radius: 3px; margin-bottom: 6px; }
.ihh-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ihh a.ihh-card:hover .ihh-card-img img { transform: scale(1.03); }
.ihh-card-name { font-size: 15px; line-height: 1.35; color: var(--h-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ihh a.ihh-card:hover .ihh-card-name { color: var(--h-pink-deep); }
.ihh-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 16px; }
.ihh-card-price strong { color: var(--h-ink); font-weight: 700; }
.ihh-card-price del { color: var(--h-soft); font-size: 14px; }
.ihh-card-price em { color: var(--h-green, var(--ih-green, #1F6B4F)); font-style: normal; font-size: 14px; font-weight: 600; }
.ihh-card-note { font-size: 13px; color: var(--h-gold); font-weight: 600; letter-spacing: .02em; }

/* 4. Shop by price */
.ihh-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ihh a.ihh-price { display: flex; flex-direction: column; justify-content: center; min-height: 64px; padding: 10px 12px; background: var(--h-surface); border: 1px solid var(--h-line); border-radius: 4px; transition: border-color .15s; }
.ihh a.ihh-price:hover { border-color: var(--h-pink); }
.ihh-price strong { white-space: nowrap; font-family: var(--h-serif); font-size: 15px; font-weight: 600; color: var(--h-ink); }
.ihh-price small { font-size: 14px; color: var(--h-soft); }

/* 5. Shop by type */
.ihh-types { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ihh a.ihh-type { display: flex; align-items: center; gap: 14px; background: var(--h-surface); border: 1px solid var(--h-line); border-radius: 4px; overflow: hidden; transition: border-color .15s; }
.ihh a.ihh-type:hover { border-color: var(--h-pink); }
.ihh-type img { width: 84px; height: 104px; object-fit: cover; flex: 0 0 84px; }
.ihh-type strong { display: block; font-family: var(--h-serif); font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--h-ink); }
.ihh-type small { display: block; font-size: 15px; color: var(--h-pink-deep); font-weight: 600; margin-top: 4px; }

/* 6. Craft / weavers */
.ihh-craft { background: var(--h-surface); border: 1px solid var(--h-line); border-radius: 4px; overflow: hidden; }
.ihh-craft-img img { width: 100%; height: auto; aspect-ratio: 700 / 393; object-fit: cover; }
.ihh-craft-text { padding: 18px 16px 8px; }
.ihh-craft-text h2 { margin-bottom: 14px; }
.ihh-steps { list-style: none; margin: 0 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: ihhstep; }
.ihh-steps li { counter-increment: ihhstep; border-top: 2px solid var(--h-gold); padding-top: 8px; }
.ihh-steps strong { display: block; font-family: var(--h-serif); font-size: 18px; color: var(--h-ink); }
.ihh-steps strong::before { content: "0" counter(ihhstep) " "; font-family: var(--h-sans); font-size: 12px; color: var(--h-gold); letter-spacing: .08em; vertical-align: 2px; }
.ihh-steps span { display: block; font-size: 14px; line-height: 1.4; color: var(--h-soft); }

/* 8. Talk to us */
.ihh-talk { background: var(--h-wine); color: #fff; padding: 32px 0; text-align: center; }
.ihh-talk h2 { color: #fff; margin-bottom: 6px; }
.ihh-talk p { color: rgba(255,255,255,.85); margin-bottom: 18px; }
.ihh-talk .ihh-actions { justify-content: center; max-width: 520px; margin: 0 auto; }

/* Tablet and up */
@media (min-width: 768px) {
  .ihh h2 { font-size: 30px; }
  .ihh-hero-in { max-width: 1200px; margin: 0 auto; padding: 36px 24px 40px; display: grid; grid-template-columns: 1fr minmax(0, 460px); gap: 56px; align-items: center; }
  .ihh-hero-img { order: 2; height: auto; max-height: none; aspect-ratio: 4 / 5; border-radius: 4px; }
  .ihh-hero-text { order: 1; padding: 0; }
  .ihh h1 { font-size: 46px; margin-bottom: 16px; }
  .ihh-hero-text p { font-size: 18px; margin-bottom: 24px; }
  .ihh-actions { max-width: 440px; }
  .ihh-wrap { padding: 0 24px; }
  .ihh-trust ul { grid-template-columns: repeat(4, 1fr); padding-top: 18px; padding-bottom: 18px; gap: 20px; }
  .ihh-trust li { align-items: center; }
  .ihh-sec { padding: 52px 0; }
  .ihh-sec-tight { padding-top: 12px; }
  .ihh-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
  .ihh-prices { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .ihh-price strong { font-size: 18px; }
  .ihh a.ihh-btn { padding: 10px 22px; }
  .ihh-types { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
  .ihh-craft { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .ihh-craft-img, .ihh-craft-img img { height: 100%; }
  .ihh-craft-img img { aspect-ratio: auto; min-height: 320px; }
  .ihh-craft-text { padding: 32px 36px; }
  .ihh-steps span { font-size: 15px; }
  .ihh-talk { padding: 48px 0; }
}
@media (min-width: 1100px) {
  .ihh h1 { font-size: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .ihh-card-img img { transition: none; }
}