/* HAIRIOLA brand colours are taken from the supplied Android app Theme.kt. */
:root{--olive:#353B23;--olive-light:#5A6243;--cream:#F6F2E8;--gold:#A2A675;--ink:#202318;--surface:#FFFCF5;--line:#E8E5D9;--muted:#67695D;--focus:#8BA568;--radius:19px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
[hidden]{display:none!important}
.wrap{width:min(1152px,calc(100% - 64px));margin-inline:auto}
.skip-link{position:absolute;top:-80px;left:16px;z-index:20;padding:12px 18px;background:white;color:var(--olive);border-radius:6px}.skip-link:focus{top:12px}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:24px 23px}
.site-brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none}.brand-symbol{display:grid;place-items:center;position:relative;width:38px;height:38px;border:1px solid #A9AB8E;background:var(--olive);border-radius:11px;color:var(--surface);font-family:Georgia,serif;font-size:24px;line-height:1}.symbol-dot{position:absolute;top:-5px;right:6px;color:#BCC39E;font-size:23px}.brand-type{font-size:15px;font-weight:750;letter-spacing:.245em;color:var(--olive)}
.header-link{display:inline-flex;gap:12px;align-items:center;font-size:13px;font-weight:650;text-decoration:none;border-bottom:1px solid var(--olive-light);padding:8px 0;transition:gap .2s}.header-link:hover{gap:18px}
.hero{position:relative;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:26px;min-height:440px;overflow:hidden;padding:44px 52px 54px;background:var(--olive);color:var(--surface);border-radius:25px}
.hero::after{content:"";position:absolute;inset:auto -80px -165px auto;width:390px;height:390px;border:1px solid rgba(220,224,192,.13);border-radius:50%;pointer-events:none}
.eyebrow{display:flex;align-items:center;gap:13px;color:#C5CAA8;font-size:10px;letter-spacing:.16em;font-weight:700;margin:0 0 30px}.eyebrow-line{width:27px;height:1px;background:#ADB48B}
h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(43px,5.3vw,72px);font-weight:400;line-height:1.1;letter-spacing:-.05em;margin-bottom:25px}h1 em{color:#C1C9A3;font-weight:400}
.hero-description{max-width:430px;color:#E7E9DB;font-size:15px;line-height:1.85;margin-bottom:30px}.hero-button{display:inline-flex;align-items:center;gap:33px;padding:14px 21px;border-radius:999px;background:var(--cream);color:var(--olive);font-size:13px;font-weight:750;text-decoration:none;transition:transform .2s,background .2s}.hero-button:hover{transform:translateY(-2px);background:#fff}.hero-button span{font-size:19px;font-weight:400}
.hero-brand{position:relative;min-width:0;display:flex;justify-content:center;align-items:center}.hero-brand img{display:block;width:min(100%,490px);height:auto;mix-blend-mode:normal}.hero-brand-rule{position:absolute;right:9%;bottom:6%;display:flex;gap:8px;transform:rotate(-30deg);opacity:.65}.hero-brand-rule span{height:1px;width:32px;background:#BBC29E}.hero-corner{position:absolute;bottom:21px;right:31px;color:#C4C9AD;font-size:10px;letter-spacing:.18em}
.catalog{padding-top:72px;padding-bottom:76px}.section-topline{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #C9CBBA;padding-top:20px;color:var(--olive-light);font-size:10px;font-weight:750;letter-spacing:.20em}
.section-intro{display:flex;align-items:end;justify-content:space-between;gap:26px;margin:30px 0 29px}.section-intro h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(34px,4.2vw,51px);letter-spacing:-.04em;line-height:1.18;font-weight:400;margin-bottom:10px}.section-intro h2 em{color:var(--olive-light);font-weight:400}.section-intro p{color:var(--muted);font-size:14px;margin:0}.category-count{flex-shrink:0;display:flex;align-items:center;gap:9px;min-width:200px;border-left:1px solid #C8CBBB;padding-left:19px;padding-bottom:3px}.category-count strong{font-family:Georgia,serif;font-size:42px;font-weight:400;line-height:1;color:var(--olive)}.category-count span{max-width:110px;color:var(--muted);font-size:10px;letter-spacing:.08em;font-weight:700;line-height:1.5}
.search-bar{margin:0 0 23px}.search-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,315px);gap:16px;align-items:end}.search-control{min-width:0}.search-label{display:block;font-size:12px;letter-spacing:.03em;font-weight:700;color:var(--olive-light);margin-bottom:9px}.search-field,.select-field{display:flex;align-items:center;width:100%;height:55px;border:1px solid #DADBCC;border-radius:13px;background:var(--surface);transition:border-color .2s,box-shadow .2s}.search-field{gap:12px;padding:0 16px}.search-field:focus-within,.select-field:focus-within{border-color:var(--olive-light);box-shadow:0 0 0 3px rgba(90,98,67,.12)}.search-field svg{color:var(--olive-light);flex:none}.search-field input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px}.search-field input::placeholder{color:#919588}.clear-button{border:0;background:transparent;color:var(--olive);padding:9px}.select-field{position:relative}.select-field::after{content:"";position:absolute;right:19px;top:21px;width:10px;height:10px;border-right:2px solid var(--olive-light);border-bottom:2px solid var(--olive-light);transform:rotate(45deg);pointer-events:none}.select-field select{appearance:none;-webkit-appearance:none;width:100%;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:14px;padding:0 42px 0 16px;cursor:pointer}.search-feedback{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:7px 16px;margin-top:9px}.search-status{font-size:12px;color:var(--muted);margin:0;min-height:18px}.reset-filters{border:0;background:transparent;padding:2px 0;color:var(--olive);font-size:12px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}
.category-grid.single-result{grid-template-columns:minmax(0,760px);justify-content:center}
.category-card{position:relative;min-width:0;padding:27px 28px 23px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 5px 15px rgba(32,35,24,.025);transition:transform .18s,box-shadow .18s}.category-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(32,35,24,.055)}
.card-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px;padding-bottom:14px;border-bottom:1px solid var(--line)}.heading-copy{display:flex;gap:11px;align-items:center;min-width:0}.heading-copy::before{content:"";display:block;flex:none;width:4px;height:33px;border-radius:6px;background:var(--category-accent,var(--gold))}.category-number{font-size:10px;color:#85887B;font-weight:750;letter-spacing:.13em}.card-heading h3{margin:0;color:var(--category-title,var(--olive));font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:25px;letter-spacing:-.025em;line-height:1.2}.small-line{display:block;flex:none;width:21px;height:3px;border-radius:6px;background:var(--category-accent,var(--gold))}
.price-list{list-style:none;margin:0;padding:0;display:grid;gap:0}.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:40px;padding:8px 0;border-bottom:1px solid #F0EEE7}.price-row:last-child{border-bottom:0}.product-name{font-size:15px;overflow-wrap:anywhere}.price{flex:none;white-space:nowrap;font-size:15px;font-weight:760;color:var(--olive);font-variant-numeric:tabular-nums}
/* Category colours match the supplied price-list images; HAIRIOLA olive/cream remains the site theme. */
.category-card[data-category="Smooth"]{--category-accent:#B88C38;--category-title:#A77C25}
.category-card[data-category="Black"]{--category-accent:#191919;--category-title:#191919}
.category-card[data-category="Colour"]{--category-accent:#D51BA4;--category-title:#C91B97}
.category-card[data-category="Hemp"]{--category-accent:#3D8B42;--category-title:#337A38}
.category-card[data-category="Repair"]{--category-accent:#67696B;--category-title:#606366}
.category-card[data-category="Scalp"]{--category-accent:#559B57;--category-title:#FFFFFF}
.category-card[data-category="Daily"]{--category-accent:#7598A5;--category-title:#678998}
.category-card[data-category="Curl"]{--category-accent:#DE880A;--category-title:#B77305}
.category-card[data-category="NO YELLOW"]{--category-accent:#C61B9E;--category-title:#BC188F}
.category-card[data-category="Refill"]{--category-accent:#3B483C;--category-title:#CDDBC3}
.category-card[data-category="Olaplex"]{--category-accent:#D14D38;--category-title:#BD4632}
.category-card[data-category="Mounir"]{--category-accent:#108D98;--category-title:#087E88}
.category-card[data-category="Brasoul"]{--category-accent:#96516F;--category-title:#91506D}
.category-card[data-category="ΒΟΥΡΤΣΑ"]{--category-accent:#AC2C2B;--category-title:#A52C2B;background:#FFF9F6;border-color:#F0DDDA}
.category-card[data-category="Scalp"] .card-heading h3,.category-card[data-category="Refill"] .card-heading h3,.category-card[data-category="ΒΟΥΡΤΣΑ"] .card-heading h3{display:inline-block;padding:2px 9px 4px;border-radius:6px}
.category-card[data-category="Scalp"] .card-heading h3{background:#579B59}
.category-card[data-category="Refill"] .card-heading h3{background:#3B483C}
.category-card[data-category="ΒΟΥΡΤΣΑ"] .card-heading h3{background:#F2D0CE}
.feature-card{grid-column:1/-1}.feature-card .price-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
.no-results{border:1px dashed #B9BDA7;background:#FFFCF5;border-radius:16px;padding:32px;text-align:center;color:var(--muted)}.no-results p{margin:0 0 14px}.reset-button{border:0;border-radius:999px;background:var(--olive);color:#fff;padding:10px 19px;font-weight:650;font-size:13px}
.price-note{margin:28px 0 0;color:var(--muted);font-size:12px;text-align:right}
.site-footer{background:var(--olive);color:#E6E8D8}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:105px;font-size:10px;letter-spacing:.12em}.footer-brand{font-size:15px;letter-spacing:.24em;font-weight:750;color:#F2F2E8}.footer-inner a{color:inherit;text-underline-offset:5px}
@media(max-width:760px){.wrap{width:min(100% - 36px,560px)}.site-header{padding-block:15px}.brand-type{font-size:13px;letter-spacing:.18em}.header-link{font-size:12px}.hero{grid-template-columns:1fr;gap:2px;min-height:0;padding:36px 27px 29px;border-radius:18px}.eyebrow{margin-bottom:24px;font-size:9px}.hero h1{font-size:clamp(42px,10vw,63px)}.hero-description{font-size:14px;margin-bottom:22px}.hero-brand{max-width:350px;justify-self:center;margin:-5px auto -14px}.hero-brand img{max-width:100%}.hero-corner{bottom:16px;right:20px;font-size:9px}.catalog{padding-top:50px;padding-bottom:54px}.search-controls{grid-template-columns:1fr;gap:13px}.section-intro{align-items:start;flex-direction:column;gap:17px;margin-top:22px}.section-intro h2{font-size:clamp(32px,8vw,45px)}.category-count{padding-left:13px;min-width:0}.category-count strong{font-size:30px}.category-count span{max-width:180px}.category-grid{grid-template-columns:1fr;gap:13px}.category-card{padding:23px 21px 18px}.feature-card{grid-column:auto}.feature-card .price-list{grid-template-columns:1fr}.card-heading h3{font-size:24px}.price-row{min-height:42px}.footer-inner{min-height:126px;flex-wrap:wrap;justify-content:space-between;padding-block:22px}.footer-inner>span:nth-child(2){order:3;width:100%}}
@media(max-width:370px){.wrap{width:calc(100% - 26px)}.hero{padding:30px 21px 24px}.brand-type{font-size:12px}.header-link{font-size:11px}.price-row{gap:8px}.product-name{font-size:14px}.price{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* CATEGORY SEARCH: centred, larger, and the same serif type as the category titles. */
.search-controls{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.search-control{width:100%}
.search-control:first-child{max-width:690px}
.search-control:last-child{max-width:620px;margin-inline:auto;text-align:center}
.search-control:last-child .search-label{text-align:center;font-size:13px;letter-spacing:.09em}
.search-control:last-child .select-field{height:74px;border-radius:16px;margin-inline:auto;border-color:#CFD2BE;box-shadow:0 6px 20px rgba(32,35,24,.035)}
.select-field::after{top:29px;right:26px;width:12px;height:12px}
.select-field select{
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.2;
  color:var(--olive);
  text-align:center;
  text-align-last:center;
  padding:0 55px;
}
.select-field select option{
  font-family:Georgia,"Times New Roman",serif;
  font-size:21px;
  font-weight:700;
  color:var(--ink);
}
/* The free-text input follows the website's body typography. */
.search-field input,.search-field input::placeholder{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px;
  font-weight:400;
}
.search-field{height:58px}
.search-feedback{justify-content:center;gap:9px 20px;text-align:center;margin-top:15px}
/* Keep the colour on the actual text, not only the leading decorative line. */
.category-card[data-category="Smooth"] .card-heading h3{color:#A77C25}
.category-card[data-category="Black"] .card-heading h3{color:#191919}
.category-card[data-category="Colour"] .card-heading h3{color:#C91B97}
.category-card[data-category="Hemp"] .card-heading h3{color:#337A38}
.category-card[data-category="Repair"] .card-heading h3{color:#606366}
.category-card[data-category="Scalp"] .card-heading h3{color:#FFFFFF;background:#579B59}
.category-card[data-category="Daily"] .card-heading h3{color:#678998}
.category-card[data-category="Curl"] .card-heading h3{color:#B77305}
.category-card[data-category="NO YELLOW"] .card-heading h3{color:#BC188F}
.category-card[data-category="Refill"] .card-heading h3{color:#CDDBC3;background:#3B483C}
.category-card[data-category="Olaplex"] .card-heading h3{color:#BD4632}
.category-card[data-category="Mounir"] .card-heading h3{color:#087E88}
.category-card[data-category="Brasoul"] .card-heading h3{color:#91506D}
.category-card[data-category="ΒΟΥΡΤΣΑ"] .card-heading h3{color:#A52C2B;background:#F2D0CE}
@media(max-width:760px){
  .search-controls{gap:17px}
  .search-control:first-child,.search-control:last-child{max-width:100%}
  .search-control:last-child .select-field{height:68px}
  .select-field::after{top:27px;right:22px;width:10px;height:10px}
  .select-field select{font-size:24px;padding-inline:42px}
  .search-field input,.search-field input::placeholder{font-size:16px}
  .category-grid.single-result{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:370px){
  .select-field select{font-size:22px}
}