:root{
    --primary:#3f3f3f;
    --accent:#7c5f3f;
}
*{box-sizing:border-box;}
body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;line-height:1.6;font-size: 16px;color:var(--primary);}
a{color:var(--primary);text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 1rem;}
header.top-bar{display:flex;align-items:center;gap:1rem;padding:1rem 0;}
header .logo{
  flex: 0 1 auto;   /* grow:0, shrink:1, base = content size */
  min-width: 0;     /* IMPORTANT: lets it shrink when pushed */
}

/* Logo image: fixed visual size; no stretching to fill */
header .logo img{
  display:block;
  max-height:36px;  /* your normal size */
  width:auto;       /* don't fill container */
  height:auto;      /* keep aspect ratio */
  max-width:100%;   /* if container shrinks, image scales down */
}

/* Nav: hug content and sit on the right */
header.top-bar nav{
  flex: 0 0 auto;
  margin-left:auto;
}

ul.nav-menu{list-style:none;display:flex;justify-content:flex-end;align-items:center;gap:1.5rem;margin:0;padding:0;}
ul.nav-menu>li{position:relative;cursor:pointer;font-weight:600;}
.dropdown-menu{position:absolute;top:100%;left:0;background:#ffffff;padding:1rem 0;min-width:240px;box-shadow:0 4px 8px rgba(0,0,0,0.12);display:none;z-index:1000;}
.dropdown-menu li{padding:0.25rem 0.75rem;}
.dropdown-menu li+li{margin-top:0 ;border-top:1px solid #eee;}
.dropdown-menu .desc{display:block;font-size:0.85rem;font-weight:400;margin-top:0.25rem;color:#555;}
/* desktop hover & mobile tap feedback */
/* visual feedback on desktop hover AND mobile tap */
.dropdown-menu a{
    display:block;
    padding:0.25rem 0.75rem;
    transition:background-color .12s ease;
}

.dropdown-menu a:hover,
.dropdown-menu a:active{           /* `:active` fires while the finger is down */
    background:#f5f5f5;
    color:var(--accent);
}

/* turn off the OS tap-flash for every nav link */
.nav-menu a{
    -webkit-tap-highlight-color:transparent;
}
.nav-menu > li > a:hover {
    background: #f5f5f5;
    color: var(--accent);
}

/* …and for each dropdown entry */
.dropdown-menu a{
    -webkit-tap-highlight-color:transparent;
}
@media (hover:hover){ul.nav-menu>li.dropdown:hover .dropdown-menu{display:block;}}
.dropdown-menu.open{display:block;}
/*.language-selector{font-weight:400;margin-left:0.5rem;font-size:2rem;} */
.language-selector select {
    font-size: 1.1rem;               /* actually enlarges the text */
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    appearance: none;                /* removes OS dropdown styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: 1.2;
    vertical-align: middle;
}
main .intro{margin-bottom:2rem;font-size:1.1rem;}
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
h1 {
  margin-bottom: 0.25rem;
}
.sub-heading-box {
  display: inline-block;
  background-color: #f9f6f1;       /* same as .example-block */
  border: 1px solid var(--accent); /* thinner than .example-block */
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.sub-heading-box a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sub-heading-box a:hover {
  color: var(--accent);
  background-color: #f5f5f5;
}
.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 3rem;
  margin-bottom: 0.5rem;
  border-left: 0px solid var(--accent);
  border-top: 0px solid #e0e0e0;
  padding-left: 0.75rem;
  line-height: 1.3;
}

.product-block{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:0rem;margin-top:0rem;}
.product-block a > img{width:350px;flex-shrink:0;border-radius:8px;}
.product-block h3{margin:0 0 0.5rem 0;}
.product-block > a{
    flex:0 0 100px;   /*  grow | shrink | basis  */
    width:100px;      /* keeps columns aligned          */
}
.product-block h3 a:hover {
    background: #f5f5f5;
    color: var(--accent);
}
.product-block a.link-noborder,
.product-block a.link-noborder:hover,
.product-block a.link-noborder:focus,
.product-block a.link-noborder:active {
  border-bottom: none !important;  /* kills dotted underline */
  text-decoration: none;           /* in case any underline is set */
  /* box-shadow: none; */          /* uncomment if your underline comes from a shadow */
}
.product-block a.link-noborder { display: block; }


.product-description {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-top: 0rem;
}

.product-description .product-image {
  flex: 0 0 15%;
}

.product-description .product-image img {
  width: auto;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
}

.product-description .product-text {
  flex: 1;
  font-size: inherit;             /* or just delete the rule */
    text-size-adjust: 100%;      /* keeps Safari/Chrome mobile from down-scaling */
    -webkit-text-size-adjust: 100%; /* Safari/iOS prefix */
}
.product-description .product-text p {
  margin-top: 0;
}
.example-block {
  background-color: #f9f6f1;
  border-left: 4px solid var(--accent);
  border-right: 4px solid var(--accent);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  font-weight: 500;
  font-style: italic;
  color: #333;
  border-radius: 6px;
}
.example-block-2 {
  background-color: #f9f6f1;
  border-left: 4px solid var(--accent);
  border-right: 4px solid var(--accent);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  font-weight: 500;
  color: #333;
  border-radius: 6px;
}

.info-block{margin-bottom:2rem;}
.info-block h2{margin-bottom:0.5rem;}
footer{margin-top:3rem;padding:1.5rem 0;border-top:1px solid #ddd;text-align:center;font-size:0.9rem;opacity:0.8;}
/* ---------- Banner tagline & sub-line ---------- */
.tagline{
   font-family:'Quicksand',sans-serif; 
  /*  font-size:clamp(1.9rem,3vw + 1rem,2.8rem);*/
    font-size: clamp(1.7rem, 1.9vw + 0.7rem, 1.7rem);
    font-weight:600;
    line-height:1.25;
    text-align:center;
    margin:0.5rem 0 0.25rem;
}
.tagline-ru{
   font-family:'Roboto Condensed',sans-serif; !important 
  /*  font-size:clamp(1.9rem,3vw + 1rem,2.8rem);*/
    font-size: clamp(1.7rem, 1.9vw + 0.7rem, 1.7rem);
    font-weight:500;
    line-height:1.25;
    text-align:center;
    margin:0.5rem 0 0.25rem;
}


.intro-sub{
    font-family:'Quicksand',sans-serif;
    font-size:1.15rem;
    font-weight:500;
    color:#555;
    text-align:center;
    max-width:60ch;
    margin:0 auto 2rem;
}
.intro-sub-ru{
    font-family:'Roboto Condensed',sans-serif;
    font-size:1.25rem;
    font-weight:400;
    color:#555;
    text-align:center;
    max-width:60ch;
    margin:0 auto 2rem;
}


@media(max-width:768px){
    .intro-sub{font-size:1.05rem;}
}
@media (max-width: 768px) {
    .product-grid {
    grid-template-columns: 1fr;
  } 
}

@media(max-width:768px){
    header.top-bar{
     flex-direction:column;   /* banner on top, menu underneath */
     align-items:center;      /* <-- centers the row content */
     text-align:center;
 }
    header .logo{width:60%;}
    ul.nav-menu{
     flex-wrap:wrap;
     gap:1rem;
     justify-content:center;  /* <-- centers the links */
 }
  /*  .product-block{flex-direction:column;align-items:flex-start;} */
  /*  .product-block img{width:100%;} */
/* 1. Let the banner image run flush to the screen edges */
header .logo-link{          /* anchor now fills the row */
    flex:1;
    display:block;
}

header .logo-link img{      /* banner scales full-width, but stays inside container padding */
    width:100%;
    height:auto;
}

/* 2. Give the nav links some breathing room */
/*ul.nav-menu{
    padding:0 1rem;
} */

/* (optional) tiny touch-up for the drop-down <select> we’ll add next 
.language-selector select{
    background:transparent;
    border:none;
    font:inherit;
    cursor:pointer;
} */
}

/* -----------------------------------------------------------------
   Mobile layout: image + title on one line, description full-width
   ----------------------------------------------------------------- */
@media (max-width: 768px) {

  /* 2-column grid, then one row that spans both */
  .product-block{
    display: grid;
    grid-template-columns: 100px 1fr;          /* thumbnail | everything else */
    grid-template-rows: auto auto;             /* row-1, row-2  */
    column-gap: 1rem;
    row-gap: 0rem;
  }

  /* make the interior wrapper “disappear” so its children
     (h3 and p) become direct grid items                         */
  .product-block > div{ display: contents; }

  /* image ----------------------------------------------------- */
  .product-block > a{
    grid-row: 1;           /* row 1 only  */
    grid-column: 1;        /* left col    */
  }
  .product-block img{ width: 100px; height: auto; }

  /* title ----------------------------------------------------- */
  .product-block h3{
    grid-row: 1;           /* same row as image */
    grid-column: 2;        /* right col        */
    margin: 0;
    align-self: center;    /* vertical centring */
  }

  /* description ---------------------------------------------- */
  .product-block p{
    grid-row: 2;           /* second row */
    grid-column: 1 / -1;   /* span the full width (both columns) */
    margin: .5rem 0 0;
  }
}
@media (max-width: 768px) {
  .product-description {
    display: flex;           /* stay flex so gap works */
    flex-direction: column;  /* stack */
    gap: 0.75rem;            /* tighter vertical rhythm on mobile */
  }

  .product-description .product-image {
    margin: 0;               /* avoid extra top space */
    align-self: center;      /* optional: centers the column itself */
  }

  .product-description .product-image img {
    /* remove invalid `align:center;` if present */
    margin-inline: auto;     /* keep image centered */
    display: block;
  }
  .product-description .product-image,
  .product-description .product-text {
    width: 100%;
  }

}


/* ---------- Accordion FAQ ---------- */
.faq-item + .faq-item{margin-top:0.75rem;}

.faq-question{
    all:unset;
    box-sizing: border-box;
    display:flex;
    align-items:center;
    width:100%;
    padding:0.6rem 1rem;
    background:#f7f7f7;
    border:1px solid #e0e0e0;
    border-radius:6px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease;
}
.faq-question:hover{background:#ebebeb;}

.symbol{
    display:inline-block;
    margin-right:0.75rem;
    font-size:1.25rem;
    line-height:1;
    transition:transform .2s ease;
}

.faq-answer{
    display:none;
    padding:0.75rem 1rem 0.5rem;
    border:1px solid #e0e0e0;
    border-top:none;
    border-radius:0 0 6px 6px;
    background:#ffffff;
    animation:fadeIn .2s ease;
}

.faq-item.open .faq-answer{display:block;}
.faq-item.open .symbol{transform:rotate(45deg);}   /* plus → × */
.faq a {
    text-decoration: underline dotted;
}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}


/* -----------------------------------------------------------------
   Body-copy and FAQ-answer links: dotted underline
   ----------------------------------------------------------------- */
main p a,
main li a {
  text-decoration: none;
  border-bottom: 2px dotted var(--primary);
  padding-bottom: 1px;
}

.faq-answer a {
  text-decoration: none;
  border-bottom: 2px dotted var(--primary);
  padding-bottom: 1px;
}
/* === Desktop: keep logo fixed, only shrink when truly necessary === */
@media (min-width: 769px) {
  /* Logo item never “soaks up” space and doesn’t grow */
  header .logo,
  header .logo-link {
    flex: 0 0 auto !important;
  }

  /* Visual size: fixed by height; won’t grow to fill gaps */
  header .logo img,
  header .logo-link img {
    width: auto !important;
    height: auto !important;
    max-height: 120px !important; /* tweak this value */
  }

  /* Nav must NOT be flex:1 — let it hug content and sit right */
  header.top-bar nav {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

/* === Mobile: treat nav + language selector as a single centered block === */
@media (max-width: 768px){
  /* Make header a wrapping row so two items can share a line */
  header.top-bar{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;  /* centers items on each line */
    align-items: center !important;
    gap: .5rem !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Logo: own line (full width) above */
  header .logo,
  header .logo-link{
    flex: 1 1 100% !important;  /* full row */
    order: 0 !important;
  }

  /* Nav: inline-sized; no 100% width on mobile */
  header.top-bar nav{
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
  }
  ul.nav-menu{
    width: auto !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Language selector: sit on the same line as nav */
  .language-selector{
    order: 1 !important;                    /* same row as nav */
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    margin-left: .75rem !important;         /* space from nav */
  }
}

/* === Mobile: add flexible left/right gutters so nav+language stay centered and never hit edges === */
@media (max-width: 768px){
  header.top-bar{
    display:flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: .5rem !important;
  }

  /* Flexible gutters that sit on the SAME row as nav+language */
  header.top-bar::before,
  header.top-bar::after{
    content: "" !important;
    flex: 1 1 clamp(12px, 4vw, 24px) !important; /* responsive side gutters */
    order: 1 !important;
  }

  /* Logo occupies its own full-width row above */
  header .logo,
  header .logo-link{
    flex: 1 1 100% !important;
    order: 0 !important;
  }

  /* Nav + Language share the next row, centered as a single block */
  header.top-bar nav{
    order: 1 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;          /* gutters handle edge space */
    display: inline-flex !important;
  }
  ul.nav-menu{
    width: auto !important;
    flex-wrap: wrap !important;      /* allow long labels (RU) to wrap nicely */
    justify-content: center !important;
    margin: 0 !important;
    padding-inline: 8px !important;  /* tiny inner cushion so wrapped lines don't kiss edges */
  }

  .language-selector{
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 0 0 .75rem !important; /* gap from nav */
  }
}

/* === Mobile: stronger side gutters & inner cushions for long-language (e.g., RU) === */
@media (max-width: 768px){
  :root{ --mobile-gutter: clamp(20px, 6.5vw, 34px); }

  /* Ensure the whole header has safe side space regardless of content length */
  header.top-bar{
    padding-left: var(--mobile-gutter) !important;
    padding-right: var(--mobile-gutter) !important;
  }

  /* Keep nav + language centered together (from earlier rules), but add inner cushion */
  header.top-bar nav,
  .language-selector{
    max-width: 100% !important;
  }

  ul.nav-menu{
    flex-wrap: wrap !important;
    gap: clamp(.5rem, 2.5vw, .9rem) !important;   /* slightly tighter gaps on small screens */
    padding-inline: 0 !important;                 /* rely on header gutters */
    margin: 0 !important;
  }

  /* Tiny horizontal padding per link so wrapped lines don't touch edges */
  ul.nav-menu > li > a{
    padding-inline: .5rem !important;
  }

  /* Ensure some space between the last menu item and the language selector */
  .language-selector{
    margin-left: clamp(.5rem, 2.5vw, 1rem) !important;
  }
}

/* Mobile-only: keep .example-block-2 as ONE column **with spacing** */
@media (max-width: 768px){
  /* Do NOT force display; just ensure children stack and spacing is present */
  .example-block-2{
    padding: 1rem 1.25rem !important; /* reassert original padding */
    gap: 1rem;                         /* works if it's flex/grid */
  }

  /* Make every direct child span full width in any layout */
  .example-block-2 > *{
    width: 100% !important;            /* flex/float layouts */
    flex: 1 1 100% !important;         /* flex layouts */
    grid-column: 1 / -1 !important;    /* grid layouts */
    float: none !important;            /* float layouts */
  }

  /* Fallback vertical spacing between stacked items */
  .example-block-2 > * + *{
    margin-top: 1rem;
  }
}