/* ============================================================
   SHOP PAGE FRAGMENT
   ============================================================ */
[dir="ltr"] .hero { text-align:left; }

/* Hero (shared pattern with i-range) */
.hero {
  background:linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%), url('/wp-content/uploads/2026/08/shop.jpeg') right center/cover no-repeat; padding:72px 0 88px;
  position:relative; overflow:hidden;
}
.hero::before, .hero::after { display:none; }
.hero__inner { position:relative; z-index:1; max-width:820px; }
.hero__eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
[dir="rtl"] .hero__eyebrow { font-family:'Rubik',sans-serif; }
[dir="ltr"] .hero__eyebrow { font-family:'Inter',sans-serif; }
[dir="rtl"] .hero__eyebrow::before { content:""; display:block; width:28px; height:2px; background:rgba(255,255,255,.5); }
[dir="ltr"] .hero__eyebrow::after { content:""; display:block; width:28px; height:2px; background:rgba(255,255,255,.5); }
.hero h1 { font-size:clamp(2rem,4vw,3rem); font-weight:900; line-height:1.1; color:#fff; margin-bottom:16px; }
.hero h1 .c { color:#fff; }
.hero__sub { font-size:1.05rem; color:rgba(255,255,255,.82); max-width:640px; line-height:1.7; margin-bottom:32px; }

/* Wide screens: the same crop fix as every other banner. `cover` above
   scaled the 16:9 artwork up by width and took about 40% of its height, which
   cut the cart motif top and bottom. The -wide file is that artwork fading
   into the navy it already ends on, so it spans the banner at natural scale.
   Below 1000px the rule above still applies: at that width the cart would sit
   under the copy. */
@media(min-width:1000px){
  .hero {
    background:
      linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%),
      url('../../img/heroes/shop-wide.jpeg') left center / auto 100% no-repeat,
      rgb(1,20,57);
  }
}

/* Sections */
.sec { padding:72px 0; }
.sec--off { background:var(--off); }
.sec--white { background:#fff; }
.sec--dark  { background:var(--navy); color:#fff; }
[dir="rtl"] .label { font-family:'Rubik',sans-serif; }
[dir="ltr"] .label { font-family:'Inter',sans-serif; }
.label { margin-bottom:12px; }
.sec--dark .label { color:rgba(255,255,255,.6); }
h2.title { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:900; line-height:1.12; color:var(--navy); margin-bottom:14px; }
.sec--dark h2.title { color:#fff; }
.body-l { font-size:1rem; color:var(--grey); line-height:1.75; max-width:700px; }
.sec--dark .body-l { color:rgba(255,255,255,.8); }

/* CTA — the rounded teal card used on the about page, not a full-width dark
   band. The section itself goes back to the page ground so the card reads as
   a card; `:has()` keeps that scoped to the CTA and leaves any other dark
   section alone. */
.sec--dark:has(.cta-inner) { background:transparent; color:inherit; }
.cta-inner {
  background:linear-gradient(120deg, var(--teal-d), var(--teal));
  border-radius:20px; padding:44px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-inner h2 { font-size:clamp(1.4rem,2.8vw,2rem); font-weight:900; color:#fff; line-height:1.2; max-width:520px; }
.cta-inner p { color:rgba(255,255,255,.75); margin-top:8px; font-size:.95rem; }
.cta-btns { display:flex; gap:12px; flex-shrink:0; flex-wrap:wrap; }
@media(max-width:600px){ .cta-inner { flex-direction:column; align-items:flex-start; padding:32px 28px; } }

/* The pale-blue pill is the site's own .btn--white; the shop's second button
   sits beside it, outlined on the teal so the two do not compete. */
.cta-btns .btn--outline {
  background:transparent; border:2px solid rgba(255,255,255,.6); color:#fff;
}
.cta-btns .btn--outline:hover { background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }

/* No max-width of its own: the products line up with every other section on
   the site, which is the .wrap width. */
.shop-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin:36px 0 0;
}
@media(max-width:900px){ .shop-grid { grid-template-columns:repeat(2,1fr); } }
.shop-card { background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:14px; box-shadow:0 8px 24px -16px rgba(0,0,0,.2); padding:32px 28px; display:flex; flex-direction:column; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.shop-card:hover { border-color:var(--navy); transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(0,0,0,.28); }
/* The product shots are studio cut-outs on white and vary in shape, so `cover`
   filled the box by cropping — it took the top off the taller cartons. They
   are shown whole instead, on white so the cut-out background disappears into
   the card. */
.shop-card__ph {
  height:180px; background:#fff; display:flex; align-items:center; justify-content:center;
  color:#9aa1ad; font-size:.78rem; font-weight:700; margin-bottom:20px; overflow:hidden;
  padding:6px 0;
}
.shop-card__ph img { width:100%; height:100%; object-fit:contain; object-position:center; }
.shop-card__name { font-size:1.1rem; font-weight:900; color:var(--teal-d); margin-bottom:6px; }
[dir="rtl"] .shop-card__name { font-family:'Rubik',sans-serif; }
[dir="ltr"] .shop-card__name { font-family:'Inter',sans-serif; }
.shop-card__desc { font-size:.86rem; color:var(--grey); line-height:1.6; margin-bottom:18px; flex:1; }
.shop-card__price { font-size:1.5rem; font-weight:900; color:var(--teal-d); margin-bottom:4px; }
[dir="rtl"] .shop-card__price { font-family:'Rubik',sans-serif; }
[dir="ltr"] .shop-card__price { font-family:'Inter',sans-serif; }
.shop-card__vat { font-size:.74rem; color:var(--grey); margin-bottom:18px; }
.shop-card__btn {
  font-size:.87rem; font-weight:700; padding:12px 20px; text-align:center;
  background:var(--teal); color:#fff; text-decoration:none; transition:.2s;
}
.shop-card__btn:hover { background:var(--teal-d); }
@media(max-width:600px){ .shop-grid { grid-template-columns:1fr; } }

.shop-options {
  display:grid; grid-template-columns:1fr 1fr;
  gap:24px; margin-top:36px;
}
.shop-opt { background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:14px; padding:26px 24px; box-shadow:0 8px 24px -16px rgba(0,0,0,.2); }
.shop-opt__h { font-size:.98rem; font-weight:700; color:var(--teal-d); margin-bottom:6px; }
[dir="rtl"] .shop-opt__h { font-family:'Rubik',sans-serif; }
[dir="ltr"] .shop-opt__h { font-family:'Inter',sans-serif; }
.shop-opt__p { font-size:.86rem; color:var(--grey); line-height:1.6; }
.shop-opt__tag { display:inline-block; margin-top:10px; font-size:.78rem; font-weight:700; color:var(--teal-d); background:var(--off); padding:4px 10px; }
@media(max-width:640px){ .shop-options { grid-template-columns:1fr; } }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:start; margin-top:36px; }
@media(max-width:860px){ .contact-grid { grid-template-columns:1fr; } }

.contact-info { display:flex; flex-direction:column; gap:14px; }
.contact-info__item { background:#fff; border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:14px; padding:20px 22px; box-shadow:0 8px 24px -16px rgba(0,0,0,.2); text-align:center; }

.contact-info__h { font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-d); margin-bottom:6px; }
[dir="rtl"] .contact-info__h { font-family:'Rubik',sans-serif; }
[dir="ltr"] .contact-info__h { font-family:'Inter',sans-serif; }
.contact-info__v { font-size:.95rem; color:#000; font-weight:600; }
.contact-info__v a { color:inherit; text-decoration:none; }
.wa-icon-link { display:inline-flex; align-items:center; justify-content:center; color:#25D366; }
.wa-icon-link:hover { color:#1DA851; }

.contact-notice { padding:14px 18px; margin-bottom:24px; font-size:.9rem; font-weight:600; }
.contact-notice--ok { background:var(--teal-light); color:var(--teal-d); border:1px solid var(--teal); }
.contact-notice--err { background:#FEF0E9; color:#c5501e; border:1px solid #c5501e; }

.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form__row { display:flex; flex-direction:column; gap:6px; }
.contact-form__row--full { grid-column:1 / -1; }
.contact-form label { font-size:.82rem; font-weight:700; color:#000; }
[dir="rtl"] .contact-form label { font-family:'Rubik',sans-serif; }
[dir="ltr"] .contact-form label { font-family:'Inter',sans-serif; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family:inherit; font-size:.92rem; padding:11px 14px;
  border:1px solid var(--line); background:#fff; color:#000; width:100%;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { outline:2px solid var(--teal); outline-offset:1px; }
.contact-form textarea { resize:vertical; }
.contact-form button.btn { border:none; cursor:pointer; width:100%; }
@media(max-width:560px){ .contact-form { grid-template-columns:1fr; } }