/* Coirpath – shared responsive + colour overrides (loaded on every page) */

/* ---------- Brown backgrounds: all text white ---------- */
[style*="background:#A0703A"],[style*="background:#8A5A32"],[style*="background:#6E4524"],
[style*="background: #A0703A"],[style*="background: #8A5A32"],[style*="background: #6E4524"]{color:#fff!important}
[style*="background:#A0703A"] *:not([style*="background:#F3EEE4"]):not([style*="background:#FFFFFF"]):not([style*="background:#FBF8F2"]):not([style*="background:#fff"]),
[style*="background:#8A5A32"] *:not([style*="background:#F3EEE4"]):not([style*="background:#FFFFFF"]):not([style*="background:#FBF8F2"]):not([style*="background:#fff"]),
[style*="background:#6E4524"] *:not([style*="background:#F3EEE4"]):not([style*="background:#FFFFFF"]):not([style*="background:#FBF8F2"]):not([style*="background:#fff"]){color:#fff!important}
/* keep cream buttons readable inside brown sections */
[style*="background:#A0703A"] a[style*="background:#F3EEE4"],[style*="background:#A0703A"] a[style*="background:#FFFFFF"],[style*="background:#A0703A"] a[style*="background:#FBF8F2"],
[style*="background:#8A5A32"] a[style*="background:#F3EEE4"],[style*="background:#6E4524"] a[style*="background:#F3EEE4"]{color:#2B2419!important}
/* hero overlays that end in brown */
[style*="#6E4524"][style*="gradient"] *:not(a[style*="background:#F3EEE4"]){color:#fff!important}
/* brown / muted-brown text on dark sections was nearly invisible */
[style*="background:#2B2419"] [style*="color:#5C4E3A"],[style*="background:#173A29"] [style*="color:#5C4E3A"],
[style*="background:#2F5D50"] [style*="color:#5C4E3A"],[style*="background:#24553A"] [style*="color:#5C4E3A"],
[style*="background:#2B2419"] [style*="color:#4A3F30"],[style*="background:#173A29"] [style*="color:#4A3F30"],
[style*="background:#2B2419"] [style*="color:#8A5A32"],[style*="background:#173A29"] [style*="color:#8A5A32"],
[style*="background:#2B2419"] [style*="color:#6E4524"],[style*="background:#173A29"] [style*="color:#6E4524"]{color:#F3EEE4!important}

/* ---------- Bigger logo ---------- */
header a[style*="width:max-content"] > span:first-child{font-size:44px!important}
header a[style*="width:max-content"] > span:last-child > span:nth-child(2){font-size:11px!important}
footer span[style*="font-size:30px"][style*="Bricolage"]{font-size:46px!important}
header > div:nth-child(2){min-height:88px!important}
html,body{overflow-x:clip}

/* background-style images that were missing width/height */
img[style*="position:absolute"][style*="inset:0"]{width:100%!important;height:100%!important;object-fit:cover}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  [style*="grid-template-columns:minmax(0,1"],
  [style*="grid-template-columns:repeat(3,"],
  [style*="grid-template-columns:repeat(4,"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  body{overflow-x:hidden}
  img,video,svg{max-width:100%}
  /* every multi-column grid becomes a single column */
  [style*="grid-template-columns:repeat(2,"],
  [style*="grid-template-columns:repeat(3,"],
  [style*="grid-template-columns:repeat(4,"],
  [style*="grid-template-columns:minmax(0,"]{grid-template-columns:minmax(0,1fr)!important}
  /* auto-fit grids: never wider than the screen */
  [style*="grid-template-columns:repeat(auto-fit"],
  [style*="grid-template-columns:repeat(auto-fill"]{grid-template-columns:minmax(0,1fr)!important}
  /* small stat tiles / chips may sit two per row */
  [style*="grid-template-columns:repeat(auto-fit,minmax(min(100%,160px)"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(min(100%,170px)"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(min(100%,180px)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* spanning cards created extra narrow columns on phones */
  [style*="grid-column:span"]{grid-column:auto!important}
  [style*="grid-row:span"]{grid-row:auto!important}
  [style*="display:grid"]{grid-auto-columns:minmax(0,1fr)}
  [style*="min-height:480px"]{min-height:360px!important}
  /* readable captions over photo cards */
  a[style*="position:relative"][style*="overflow:hidden"] span{text-shadow:0 1px 10px rgba(0,0,0,.55)}
  a[style*="position:relative"] > div[style*="linear-gradient(180deg,rgba(18,40,28,"]{background:linear-gradient(180deg,rgba(18,40,28,.1) 0%,rgba(18,40,28,.92) 70%)!important}
  /* grid children must be allowed to shrink */
  [style*="display:grid"] > *{min-width:0}
  /* flex rows that squeeze cards: let them wrap / stack */
  [style*="display:flex"][style*="overflow-x:auto"]{flex-wrap:nowrap!important}
  main section [style*="display:flex"]:not([style*="flex-direction:column"]):not([style*="overflow-x"]):not([style*="align-items:center"]){flex-wrap:wrap}
  main [style*="flex:1"]{min-width:min(100%,240px)}
  /* section padding & type */
  main section > div[style*="max-width:1300px"],footer > div{padding-left:18px!important;padding-right:18px!important}
  main section > div[style*="max-width:1300px"]{padding-top:40px!important;padding-bottom:40px!important}
  main section[style*="max-width:1300px"]{padding:40px 18px!important}
  h1{font-size:clamp(32px,9vw,44px)!important;line-height:1.05!important}
  h2{font-size:clamp(26px,7vw,34px)!important}
  /* header logo a bit smaller so the burger still fits */
  header a[style*="width:max-content"] > span:first-child{font-size:36px!important}
  header a[style*="width:max-content"] > span:last-child > span:nth-child(2){font-size:9px!important}
  header > div:nth-child(2){padding:10px 16px!important;min-height:72px!important}
  footer span[style*="font-size:30px"][style*="Bricolage"]{font-size:40px!important}
  /* buttons full width friendly */
  main a[style*="border-radius:999px"][style*="height:"]{max-width:100%;white-space:normal!important;text-align:center}
  table{display:block;overflow-x:auto;max-width:100%}
  input,select,textarea{max-width:100%}
}

/* ---------- Balanced card rows (desktop/tablet-landscape) ---------- */
@media (min-width:901px){
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(5):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(7):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(8):last-child){grid-template-columns:repeat(4,minmax(0,1fr))!important}
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(9):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* 3 cards: keep in one line on tablets too */
@media (min-width:641px) and (max-width:900px){
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(2):last-child),
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(4):last-child),
  main [style*="display:grid"][style*="repeat(auto-"]:not(form *):has(> :nth-child(6):last-child){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ======================= Animations ======================= */
@media (prefers-reduced-motion:no-preference){
  /* scroll reveal (only active once JS has marked the page) */
  .js-anim [data-reveal]{opacity:0;transform:translate3d(0,28px,0);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease;will-change:opacity,transform}
  .js-anim [data-reveal="head"]{transform:translate3d(0,22px,0);filter:blur(6px)}
  .js-anim [data-reveal="img"]{transform:scale(.96);}
  .js-anim [data-reveal="left"]{transform:translate3d(-36px,0,0)}
  .js-anim [data-reveal="right"]{transform:translate3d(36px,0,0)}
  .js-anim [data-reveal].is-in{opacity:1;transform:none;filter:none}

  /* buttons & links */
  a[style*="border-radius:999px"],button,input[type=submit]{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,background-color .25s ease,color .2s ease,filter .25s}
  main a[style*="border-radius:999px"]:hover,header a[style*="border-radius:999px"]:hover,button:hover,input[type=submit]:hover{transform:translateY(-3px);box-shadow:0 14px 26px -12px rgba(43,36,25,.45);filter:brightness(1.06)}
  main a[style*="border-radius:999px"]:active,button:active{transform:translateY(0) scale(.97);box-shadow:none}
  a[style*="height:46px"],a[style*="height:50px"],a[style*="height:52px"],a[href*="/contact"][style*="background:#173A29"]{position:relative;overflow:hidden}
  a[style*="height:46px"]::after,a[style*="height:50px"]::after,a[style*="height:52px"]::after,a[href*="/contact"][style*="background:#173A29"]::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s ease}
  a[style*="height:46px"]:hover::after,a[style*="height:50px"]:hover::after,a[style*="height:52px"]:hover::after,a[href*="/contact"][style*="background:#173A29"]:hover::after{left:130%}
  /* text links: animated underline on footer + inline arrows */
  footer a{transition:color .2s ease,transform .2s ease,padding-left .2s ease}
  footer a:hover{color:#D9A23A;padding-left:6px}
  nav[aria-label="Main"] a{transition:background-color .25s ease,color .25s ease,transform .25s ease}
  nav[aria-label="Main"] a:hover{transform:translateY(-2px)}

  /* cards */
  main a[style*="border-radius:2"],main a[style*="border-radius:3"],main div[style*="border-radius:20px"],main div[style*="border-radius:24px"],main div[style*="border-radius:28px"],main div[style*="border-radius:16px"]{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
  main a[style*="border-radius:2"]:hover,main a[style*="border-radius:3"]:hover,main div[style*="border-radius:20px"][style*="padding"]:hover,main div[style*="border-radius:24px"][style*="padding"]:hover,main div[style*="border-radius:16px"][style*="padding"]:hover{transform:translateY(-6px);box-shadow:0 26px 44px -26px rgba(43,36,25,.45)}

  /* images */
  main img{transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}
  main a:hover > img,main div:hover > img[style*="position:absolute"],main a[style*="overflow:hidden"]:hover img{transform:scale(1.07)}
  main img[style*="border-radius"]:hover{transform:scale(1.03)}

  /* hero fonts: gentle load-in + floating badges */
  @keyframes cpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  main section:first-child span[style*="border-radius:999px"]{animation:cpFloat 4s ease-in-out infinite}
  @keyframes cpHeadIn{from{opacity:0;letter-spacing:.04em;filter:blur(8px)}to{opacity:1;filter:none}}
  main h1{animation:cpHeadIn .9s cubic-bezier(.2,.7,.2,1) both}
  /* number badges pop */
  .js-anim .is-in span[style*="border-radius:50%"]{animation:cpPop .6s cubic-bezier(.3,1.6,.5,1) both}
  @keyframes cpPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
  /* mobile menu items */
  #mobileNavAccordion a{transition:background-color .2s ease,transform .2s ease}
  #mobileNavAccordion a:active{transform:scale(.98)}
}

/* ---------- Mobile: larger text (desktop keeps original sizes) ---------- */
@media (max-width:640px){
  [style*="font-size:11px"]{font-size:12.5px!important}
  [style*="font-size:12px"]{font-size:13.5px!important}
  [style*="font-size:12.5px"]{font-size:14px!important}
  [style*="font-size:13px"]{font-size:14.5px!important}
  [style*="font-size:13.5px"]{font-size:15.5px!important}
  [style*="font-size:14px"]{font-size:16px!important}
  [style*="font-size:14.5px"]{font-size:16.5px!important}
  [style*="font-size:15px"]{font-size:17px!important}
  [style*="font-size:15.5px"]{font-size:17.5px!important}
  [style*="font-size:16px"]{font-size:18px!important}
  [style*="font-size:16.5px"]{font-size:18.5px!important}
  [style*="font-size:17px"]{font-size:19px!important}
  [style*="font-size:17.5px"]{font-size:19.5px!important}
  [style*="font-size:18px"]{font-size:20px!important}
  [style*="font-size:19px"]{font-size:21px!important}
  [style*="font-size:20px"]{font-size:22px!important}
  [style*="font-size:22px"]{font-size:23px!important}
  [style*="font-size:24px"]{font-size:25px!important}
  header a[style*="width:max-content"] > span:first-child{font-size:36px!important}
  header a[style*="width:max-content"] > span:last-child > span:nth-child(2){font-size:9px!important}
}

/* ---------- Header: full menu down to 1151px, burger below ---------- */
@media (max-width:1150px){
  #mobileNavToggle{display:inline-flex!important;align-items:center;justify-content:center}
  header nav[aria-label="Main"]{display:none!important}
  header > div:nth-child(2){flex-wrap:nowrap!important;justify-content:space-between!important;min-height:76px!important}
  header a[style*="width:max-content"] > span:first-child{font-size:38px!important}
  header > div:first-child > div > span:first-child{display:none!important}
  header > div:first-child > div{justify-content:center!important}
}
@media (min-width:1151px){
  #mobileNavToggle{display:none!important}
  #mobileNavAccordion{display:none!important}
  header nav[aria-label="Main"]{display:flex!important;width:auto!important;overflow:visible!important;justify-content:flex-end!important;flex-wrap:nowrap!important;flex:1 1 auto;min-width:0}
  header > div:nth-child(2){flex-wrap:nowrap!important;gap:16px!important}
}
/* compact desktop header so every menu item fits (1151–1500px, incl. browser zoom) */
@media (min-width:1151px) and (max-width:1500px){
  header a[style*="width:max-content"] > span:first-child{font-size:36px!important}
  header a[style*="width:max-content"] > span:last-child > span:nth-child(2){font-size:9px!important;letter-spacing:.22em!important}
  header nav[aria-label="Main"]{gap:0!important;font-size:14.5px!important}
  header nav[aria-label="Main"] a{padding:0 9px!important;height:36px!important}
  header nav[aria-label="Main"] a[href*="/contact/bulk"]{padding:0 14px!important;margin-left:6px!important;height:38px!important}
  header > div:nth-child(2){padding-left:20px!important;padding-right:20px!important;min-height:80px!important}
}
@media (min-width:1151px) and (max-width:1260px){
  header a[style*="width:max-content"] > span:first-child{font-size:32px!important}
  header a[style*="width:max-content"] > span:last-child > span:nth-child(2){font-size:8px!important;letter-spacing:.16em!important}
  header nav[aria-label="Main"]{font-size:13.5px!important}
  header nav[aria-label="Main"] a{padding:0 7px!important}
  header nav[aria-label="Main"] a[href*="/contact/bulk"]{padding:0 11px!important}
}
/* sub navigation bars (Oman / USA) never push the page wider */
[style*="overflow-x:auto"]{max-width:100%}

/* ---------- Footer: one neat row ---------- */
footer > div > div[style*="display:grid"]{gap:36px!important}
@media (min-width:901px){
  footer > div > div[style*="display:grid"]{grid-template-columns:1.3fr 1fr 1fr 1fr 1.3fr!important;align-items:start}
}
@media (min-width:641px) and (max-width:900px){
  footer > div > div[style*="display:grid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
footer a,footer span{overflow-wrap:anywhere}

/* ---------- Quote / contact forms ---------- */
form [style*="display:grid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px 16px!important}
form label{font-size:14px!important;font-weight:600;color:#3A3226;gap:6px!important;min-width:0}
form input:not([type=checkbox]):not([type=radio]),form select{height:50px;padding:0 14px!important;font-size:16px!important;border:1px solid rgba(43,36,25,.18)!important;border-radius:12px!important;background-color:#fff;outline:none;box-shadow:none;text-overflow:ellipsis}
form select{padding-right:34px!important}
form textarea{min-height:110px;padding:12px 14px!important;font-size:16px!important;border:1px solid rgba(43,36,25,.18)!important;border-radius:12px!important;outline:none}
form input:focus,form select:focus,form textarea:focus{border-color:#2F5D50!important;box-shadow:0 0 0 3px rgba(47,93,80,.18)}
form input[type=checkbox]{accent-color:#2F5D50;flex:none}
form button[type=submit]{width:100%;height:54px;padding:0 22px!important;font-size:17px!important;letter-spacing:.01em}
form label[style*="grid-column"],form [style*="grid-column:1 / -1"]{grid-column:1 / -1!important}
@media (max-width:640px){
  form [style*="display:grid"]{grid-template-columns:minmax(0,1fr)!important}
  form input:not([type=checkbox]):not([type=radio]),form select{height:52px}
}

/* all cards hover-animate equally (overrides scroll-reveal stagger delay) */
@media (prefers-reduced-motion:no-preference){
  main div[style*="border-radius:20px"][style*="padding"],main div[style*="border-radius:24px"][style*="padding"],main div[style*="border-radius:28px"][style*="padding"],main div[style*="border-radius:16px"][style*="padding"]{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,opacity .7s ease!important}
  main div[style*="border-radius:20px"][style*="padding"]:hover,main div[style*="border-radius:24px"][style*="padding"]:hover,main div[style*="border-radius:28px"][style*="padding"]:hover,main div[style*="border-radius:16px"][style*="padding"]:hover{transform:translateY(-6px)!important;box-shadow:0 26px 44px -26px rgba(43,36,25,.45)!important;transition-delay:0s!important}
}

/* stagger delay via classes (inline style edits broke the attribute selectors) */
@media (prefers-reduced-motion:no-preference){
  .js-anim [data-reveal].cp-d1{transition-delay:.11s}.js-anim [data-reveal].cp-d2{transition-delay:.22s}.js-anim [data-reveal].cp-d3{transition-delay:.33s}.js-anim [data-reveal].cp-d4{transition-delay:.44s}.js-anim [data-reveal].cp-d5{transition-delay:.55s}.js-anim [data-reveal].cp-d6{transition-delay:.66s}.js-anim [data-reveal].cp-d7{transition-delay:.77s}.js-anim [data-reveal].cp-d8{transition-delay:.88s}
  .js-anim [data-reveal][class*="cp-d"]:hover{transition-delay:0s!important}
}
/* 5-item stat strips: one single line on desktop */
@media (min-width:901px){
  main div[style*="max-width:1300px"][style*="display:grid"][style*="gap:18px"]:not(form *):has(> :nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))!important}
}

/* ---------- Process page: "Forming each product" cards ---------- */
main .cp-form-grid.cp-form-grid.cp-form-grid.cp-form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))!important}
.cp-form-card{height:100%;box-shadow:0 14px 36px -26px rgba(43,36,25,.4);border:1px solid rgba(43,36,25,.06)}
.cp-form-card .cp-form-img{aspect-ratio:16/10;max-height:230px}
.cp-form-card .cp-form-img img{width:100%;height:100%;object-fit:cover}
.cp-form-card > div:last-child{flex:1;gap:16px!important}
.cp-form-card > div:last-child > div:first-child span:last-child{font-size:22px!important;line-height:1.15}
.cp-form-card > div:last-child > div:first-child span:first-child{font-size:13px!important;padding:4px 11px!important}
.cp-form-card > div:last-child > a{margin-top:auto;align-self:flex-start;padding:10px 18px;border-radius:999px;border:1.5px solid currentColor;font-size:14px}
@media (max-width:640px){
  .cp-form-card{padding:16px!important;border-radius:20px!important}
  .cp-form-card .cp-form-img{aspect-ratio:16/9;max-height:200px}
  .cp-form-card > div:last-child > a{align-self:stretch;text-align:center}
}