/* Akil's Hair Studio | Premium gradient editorial skin v6
   CSS-only, low-cost visuals. Original brand artwork and all data workflows remain unchanged. */
:root {
  --ink:#181513;
  --black:#100e0f;
  --red:#eb302b;
  --orange:#fa7b20;
  --cream:#faf8f6;
  --line:#eae4e0;
  --accent-gradient:linear-gradient(108deg,#ea3633 2%,#f35a26 50%,#fc8f2a 100%);
}
html { background: #faf8f6; }
body {
  background:
    radial-gradient(ellipse 82% 340px at 105% 20%, rgba(247,135,74,.075),transparent 80%),
    radial-gradient(ellipse 92% 360px at -20% 62%, rgba(232,83,62,.04),transparent 85%),
    #faf8f6;
  color:#201b19;
}
.shell{max-width:1100px}
/* Compact dark signature bar. The official source PNG itself is never modified. */
.site-header {
  background:linear-gradient(115deg,#080809 0%,#181112 61%,#0d0d0f 100%)!important;
  border-bottom:1px solid rgba(251,146,81,.13)!important;
  box-shadow:0 3px 18px rgba(16,12,12,.11);
}
.site-header::after {content:"";display:block;position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(235,48,43,.45),rgba(250,123,32,.25),transparent 65%);pointer-events:none}
.topbar{min-height:75px}
.mini-brand{width:159px;max-width:159px;min-height:70px;display:flex;align-items:center;overflow:visible}
.header-original-logo{display:block;width:155px;height:70px;max-width:100%;object-fit:contain;object-position:left center;background:transparent;border:0;filter:none}
.mini-brand:hover .header-original-logo{filter:brightness(1.04)}
.mini-brand:focus-visible{outline:2px solid #fa8336;outline-offset:0;border-radius:7px}
/* Editorial gradient hero — simple on mobile, with fine atmospheric effects instead of bulky imagery. */
.hero {
  min-height:264px;max-height:none;margin-top:17px;padding:34px 38px 36px;
  display:flex;align-items:center;border-radius:27px;position:relative;isolation:isolate;
  background:
    radial-gradient(ellipse 50% 100% at 105% 8%,rgba(235,64,44,.31),transparent 86%),
    radial-gradient(ellipse 52% 96% at 68% 115%,rgba(249,129,35,.21),transparent 76%),
    linear-gradient(112deg,#100e11 3%,#211316 56%,#351a1a 100%);
  border:1px solid rgba(254,172,106,.11);
  box-shadow:0 14px 42px rgba(35,15,15,.12),inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.hero:before{
  content:"";position:absolute;inset:auto -94px -250px auto;width:430px;height:430px;
  border:1px solid rgba(255,145,98,.17);border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 68px rgba(249,115,59,.028),0 0 0 140px rgba(249,115,59,.018);z-index:0;
}
.hero:after {content:"";display:block!important;position:absolute;top:-140px;right:-145px;width:390px;height:390px;border-radius:50%;border:1px solid rgba(255,145,90,.16);background:transparent;pointer-events:none;z-index:0}
.hero-copy{position:relative;z-index:2;width:100%}
.hero .eyebrow.light {color:#f3b5a5;letter-spacing:.22em;font-size:10px;font-weight:750}
.hero .signal{background:linear-gradient(120deg,#ef3930,#ff913b);box-shadow:0 0 0 5px rgba(243,103,59,.115)}
.hero h1 {
  font-size:clamp(33px,4.4vw,58px);line-height:1.075;max-width:760px;
  letter-spacing:-.059em;margin:15px 0 20px;font-weight:800;color:#fff;
}
.gradient-title {
  display:inline-block;
  background:linear-gradient(98deg,#ffeddf 0%,#ff9d59 36%,#fd6d30 73%,#f13f3e 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ff934f;
}
.hero-actions .btn.orange {
  background:var(--accent-gradient);color:#1b0f09;box-shadow:0 9px 24px rgba(236,80,38,.21);
  min-height:45px;padding:12px 21px;font-size:12px;border:1px solid rgba(255,193,132,.18);
  transition:filter .15s ease,transform .15s ease;
}
.hero-actions .btn.orange:hover {filter:brightness(1.055);transform:translateY(-1px)}
/* Clear hierarchy: heading, search, collections. */
.search-section{padding-top:28px;padding-bottom:8px}
.section-title-line{align-items:end;gap:12px}
.eyebrow.dark {color:#c95637;font-weight:850;letter-spacing:.19em;font-size:10px}
.section-title-line h2{color:#1e1918;letter-spacing:-.052em;font-weight:850}
.search-section .section-title-line h2{font-size:clamp(23px,3.7vw,31px);margin-top:4px}
.search-shell{
  min-height:60px;border:1px solid rgba(230,217,208,.95);border-radius:20px;
  background:rgba(255,255,255,.98);box-shadow:0 11px 32px rgba(31,16,12,.045);padding:6px 7px 6px 18px;
}
.search-shell:focus-within{border-color:#e6a47f;box-shadow:0 0 0 4px rgba(247,121,62,.09),0 12px 28px rgba(35,13,9,.055)}
.search-icon{color:#b76549;font-size:28px}
.search-shell input{font-size:16px;font-weight:500}
.search-shell input::placeholder{color:#aaa29e}
.search-submit{border-radius:15px;background:#1d1819;color:#fff;font-size:12px;min-height:43px;padding:11px 20px}
.search-submit:hover{background:#2b2020}
#categories-section{padding-top:30px}
#categories-section .section-title-line{margin-bottom:19px}
#categories-section .section-title-line h2{font-size:clamp(26px,3.5vw,34px)}
.text-link{color:#8d4f3d;font-weight:800}
.category-grid{gap:17px}
.category-card {text-align:left;padding:0;border-radius:19px;transition:transform .16s ease;min-width:0}
.category-card .cat-cover {
  position:relative;display:block;aspect-ratio:1.05;width:100%;margin:0;
  border-radius:18px;border:1px solid #eae0db;box-shadow:0 5px 16px rgba(29,18,18,.045);background:#2a1b1a;overflow:hidden;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.category-card .cat-cover:after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(0deg,rgba(12,5,5,.22),transparent);pointer-events:none}
.category-card .cat-cover img{display:block;width:100%;height:100%;object-fit:cover;transform:none;transition:transform .23s ease}
.category-card:hover .cat-cover{border-color:#f1b69d;box-shadow:0 11px 27px rgba(34,14,10,.11);transform:none}
.category-card:hover .cat-cover img{transform:scale(1.045)}
.cat-name{margin-top:10px;line-height:1.35;font-size:12px;font-weight:800;letter-spacing:-.019em;text-align:left}
.cat-count{font-size:10px;margin-top:3px;text-align:left;color:#a59994}
.cat-skeleton{border-radius:17px}
/* Soft photography-first listing treatment: no heavy glass overlays on actual salon work. */
.results-section{border-top:1px solid #eae2dd;padding-top:27px}
#results-title{font-size:clamp(26px,3.6vw,32px)}
.back-link{color:#a2513a}
.outline.small {border:1px solid #e4d9d3;background:#fff;color:#6b3930;border-radius:13px}
.product-grid{gap:19px}
.product-card.portfolio-card {
  border:1px solid #ebe4df;border-radius:19px;background:#fff;
  box-shadow:0 8px 26px rgba(28,20,18,.047);overflow:hidden;
  transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease;
}
.product-card.portfolio-card:hover{transform:translateY(-2px);border-color:#eacabc;box-shadow:0 12px 28px rgba(48,25,17,.085)}
.portfolio-card .product-photo {aspect-ratio:4/5;background:#eeeae8;overflow:hidden;position:relative}
.portfolio-card .product-photo img{width:100%;height:100%;object-fit:cover}
.portfolio-card .product-photo:after{content:"";pointer-events:none;position:absolute;inset:75% 0 0;background:linear-gradient(0deg,rgba(11,4,4,.055),transparent)}
.portfolio-card .product-body{padding:13px 13px 15px}
.portfolio-card .product-meta{font-size:9px;color:#bd6347;letter-spacing:.11em}
.portfolio-card .product-name{font-size:15px;margin-top:6px;font-weight:800}
.portfolio-card .product-quick button{width:36px;height:36px;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.84);box-shadow:0 3px 14px #180e0e25;color:#241c1b}
.portfolio-card .product-quick button.liked{color:#e93c40}
.load-btn{background:#fff;border-color:#e4d8d1;box-shadow:0 3px 18px #2b15120b}
/* Product modal: restrained frame, generous photography, obvious gesture targets. */
#product-modal{background:#fcfbf9;border:1px solid #ece1da;border-bottom:0}
#product-modal .sheet-top .eyebrow{color:#b45b40;letter-spacing:.2em}
#product-modal .close-btn{background:#f1ebe6;color:#27201e}
.portfolio-gallery .detail-img-wrap{background:linear-gradient(145deg,#f5f0ec,#eeeae6 48%,#f8f4f1);border:1px solid #ece4de;border-radius:18px}
.portfolio-gallery .detail-img-wrap img{object-fit:contain;filter:none}
.portfolio-gallery .detail-thumbs{padding:14px 2px 14px}
.portfolio-gallery .detail-thumbs button{border-radius:11px;background:#f2edeb;border:2px solid #eae3df;transition:border-color .15s}
.portfolio-gallery .detail-thumbs button.selected{border-color:#f26b34;box-shadow:0 0 0 2px rgba(249,123,46,.12)}
.portfolio-intro .detail-title{letter-spacing:-.052em;color:#1c1817}
.portfolio-work-description{color:#706965}
.look-actions{gap:11px}
.look-actions button{border-radius:14px}
.look-like{background:#fff;border-color:#e9dfd8}
.look-like.liked{color:#dc383c;border-color:#f4cccc;background:#fff5f3}
.look-share{background:linear-gradient(120deg,#241a1a,#161313);border:0;color:#fff}
/* Subtle premium floating nav, no motion or full-screen blurs on photos. */
.bottom-nav {
  background:rgba(255,255,255,.975);border:1px solid rgba(227,218,213,.94);
  border-radius:20px 20px 0 0;box-shadow:0 -7px 28px rgba(38,18,13,.085);
}
.bottom-nav button{color:#8f8782}
.bottom-nav button.active{color:#eb5730}
.bottom-nav button.active .nav-glyph{font-weight:800}
.bottom-nav small{font-weight:750;letter-spacing:.008em}
/* Sharing and footer match the brand rather than default UI elements. */
.share-sheet-inner .sheet-top h2{letter-spacing:-.04em}
.ig-share-grid button {background:linear-gradient(135deg,#fff,#fbf6f2);border-color:#eaddd6}
.studio-share-options button{background:#f7f2ee;color:#322623}
.connect-section{background:linear-gradient(113deg,#161113,#271516 66%,#431f1a 115%);border:1px solid #3b2420;box-shadow:0 11px 30px #341d180e;border-radius:22px}
.connect-section .eyebrow.light{color:#efb6a1}
.connect-actions a{background:rgba(255,255,255,.07);border:1px solid rgba(255,191,147,.19)}
.footer{border-top:1px solid #eae4de;margin-top:22px}
@media(max-width:900px){
 .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
}
@media(max-width:600px){
  .shell{width:calc(100% - 32px)}
  .topbar{min-height:67px}
  .mini-brand{min-height:65px;width:139px;max-width:139px}
  .header-original-logo{width:137px;height:65px}
  .hero{margin-top:12px;border-radius:23px;min-height:0;padding:29px 24px 28px}
  .hero:before{width:315px;height:315px;right:-155px;bottom:-190px;box-shadow:0 0 0 55px rgba(249,115,59,.024),0 0 0 110px rgba(249,115,59,.012)}
  .hero:after{width:250px;height:250px;right:-170px;top:-150px}
  .hero .eyebrow.light{font-size:9px;letter-spacing:.16em}
  .hero h1{font-size:clamp(30px,8vw,36px);margin:14px 0 19px;line-height:1.09;max-width:390px}
  .hero-actions .btn.orange{font-size:12px;padding:11px 18px;min-height:44px}
  .search-section{padding:26px 0 4px}
  .search-section .section-title-line{margin-bottom:15px}
  .search-section .section-title-line h2{font-size:24px}
  .eyebrow.dark{font-size:9px}
  .search-shell{min-height:55px;border-radius:17px;padding:6px 7px 6px 14px;gap:7px}
  .search-shell input{font-size:16px}
  .search-submit{padding:11px 15px;border-radius:12px;min-height:40px}
  #categories-section{padding:29px 0 27px}
  #categories-section .section-title-line h2{font-size:27px}
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 11px}
  .category-card .cat-cover{border-radius:16px;aspect-ratio:1.01;box-shadow:0 3px 14px #26141012}
  .cat-name{font-size:11px;line-height:1.35;margin-top:8px}
  .cat-count{font-size:9px}
  .results-section{padding-top:23px}
  .results-section .section-title-line{align-items:end}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .product-card.portfolio-card{border-radius:18px;box-shadow:0 4px 14px #25130e0b}
  .portfolio-card .product-photo{aspect-ratio:3/4}
  .portfolio-card .product-body{padding:11px 10px 13px}
  .portfolio-card .product-name{font-size:13px}
  #product-modal{max-height:97dvh;border-radius:25px 25px 0 0}
  #product-modal .sheet-inner{padding:15px 13px max(23px,env(safe-area-inset-bottom))}
  .portfolio-gallery .detail-img-wrap{border-radius:13px}
  .portfolio-gallery .detail-thumbs button{width:60px;flex-basis:60px;height:61px}
  .look-actions button{min-height:51px}
  .bottom-nav{min-height:calc(69px + env(safe-area-inset-bottom));padding:6px 8px max(5px,env(safe-area-inset-bottom));border-left:0;border-right:0}
  .bottom-nav .nav-glyph{font-size:24px}
  .connect-section{border-radius:21px}
  .footer{flex-wrap:wrap;gap:10px;padding-bottom:30px}
}
@media(prefers-reduced-motion:reduce){.hero-actions .btn.orange,.category-card .cat-cover img,.product-card.portfolio-card{transition:none}}