/* =====================================================================
   PRATTA — CATALOG styles. Loaded after styles.css on /catalog pages.
   Reuses tokens, .btn, .badge, .eyebrow, .lead, .reveal, .ctaband.
   ===================================================================== */

/* ---------- shared bits ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:5px 12px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--text-2);}
.chip--gold{color:var(--gold-bright);border-color:rgba(201,169,97,.4);background:rgba(201,169,97,.08);}
.chip i,.badge i{font-size:13px;}
.badge--soft{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);border-color:var(--line-strong);
  text-transform:none;letter-spacing:.01em;font-size:11.5px;padding:5px 12px;}
.badges{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- overview grid ---------- */
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.ccard{display:flex;flex-direction:column;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(152deg,rgba(255,255,255,.085),rgba(255,255,255,.022));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 22px 54px rgba(0,0,0,.32);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);}
.ccard:hover{transform:translateY(-6px);border-color:rgba(201,169,97,.35);box-shadow:0 34px 80px rgba(0,0,0,.45);}
.ccard__media{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%,rgba(201,169,97,.14),transparent 60%),var(--bg-deep);
  display:flex;align-items:flex-end;justify-content:flex-end;padding:0;}
.ccard__media img{width:43%;height:43%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,.72));
  transition:transform .8s var(--ease);position:relative;z-index:1;margin:0 7% 7% 0;}
.ccard:hover .ccard__media img{transform:scale(1.06) translateY(-4px);}
/* preview texture background */
.ccard__media.has-tex{background:var(--bg-deep);}
.ccard__tex{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;
  transition:transform .8s var(--ease);}
.ccard:hover .ccard__tex{transform:scale(1.05);}
.ccard__tex::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(80% 70% at 68% 62%, rgba(201,169,97,.12), transparent 60%),
    linear-gradient(180deg, rgba(8,9,13,.30) 0%, rgba(8,9,13,.28) 40%, rgba(8,9,13,.58) 100%),
    radial-gradient(130% 120% at 50% 46%, transparent 54%, rgba(0,0,0,.5));}
.ccard__flag{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#1a1408;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));padding:6px 12px;border-radius:var(--r-pill);
  box-shadow:0 8px 20px rgba(201,169,97,.3);}
.ccard__flag i{font-size:12px;}
.ccard__body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px;flex:1;}
.ccard__cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:600;}
.ccard__name{font-family:var(--serif);font-size:32px;font-weight:600;line-height:1;}
.ccard__effect{color:var(--gold-bright);font-size:14px;font-weight:500;margin-top:-2px;}
.ccard__short{color:var(--text-2);font-size:14.5px;line-height:1.55;flex:1;}
.ccard__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 0;border-top:1px solid var(--line-soft);margin-top:4px;}
.ccard__meta>span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);}
.ccard__meta i{color:var(--gold);font-size:16px;}
.ccard .btn{margin-top:6px;}

/* overview page hero eyebrow spacing */
.catalog-hero .eyebrow{margin-bottom:16px;}
/* .phero zeroes the wrap side padding — restore it so the heading lines up with the card grid */
.catalog-hero{padding-left:28px;padding-right:28px;}
@media(max-width:760px){ .catalog-hero{padding-left:20px;padding-right:20px;} }

/* ---------- detail: breadcrumb ---------- */
.cbread{padding:14px 0 0;}
.cbread a{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);
  transition:color .25s;}
.cbread a:hover{color:var(--gold-bright);}

/* ---------- detail: hero ---------- */
.chero{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,60px);align-items:center;
  padding-top:26px;padding-bottom:8px;}
.chero__media{position:relative;aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 22%,rgba(201,169,97,.16),transparent 62%),var(--bg-deep);
  border:1px solid var(--line);display:flex;align-items:flex-end;justify-content:flex-end;padding:0;}
.chero__media img{width:44%;height:44%;object-fit:contain;filter:drop-shadow(0 22px 34px rgba(0,0,0,.7));position:relative;z-index:1;margin:0 6% 6% 0;}
/* hero texture background behind the bucket */
.chero__media.has-tex{background:var(--bg-deep);}
.chero__tex{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transform:scale(1.02);}
.chero__tex::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(85% 70% at 50% 40%, rgba(201,169,97,.14), transparent 58%),
    linear-gradient(180deg, rgba(8,9,13,.34) 0%, rgba(8,9,13,.30) 42%, rgba(8,9,13,.60) 100%),
    radial-gradient(135% 120% at 50% 46%, transparent 52%, rgba(0,0,0,.5));}
.chero__media.has-tex img{filter:drop-shadow(0 30px 46px rgba(0,0,0,.78));}
.chero__tags{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.chero__name{font-family:var(--serif);font-size:clamp(44px,6vw,72px);font-weight:600;line-height:.98;}
.chero__effect{color:var(--gold-bright);font-size:clamp(16px,2vw,20px);font-weight:500;margin:8px 0 18px;}
.chero__badges{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 26px;}
.chero__cta{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- detail: content blocks ---------- */
.cgrid{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,3vw,44px);align-items:start;}
.cblock{}
.csec{font-family:var(--serif);font-size:clamp(26px,3vw,34px);font-weight:600;margin-bottom:20px;
  padding-bottom:14px;border-bottom:1px solid var(--line);}
.csub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:26px 0 14px;}
.cprose{color:var(--text-2);font-size:16px;line-height:1.72;max-width:70ch;}
.cblock--card{background:linear-gradient(152deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r-card);padding:26px 26px 28px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);position:sticky;top:96px;}
.cblock--card .csub{margin-top:0;}

/* rooms */
.rooms{display:flex;flex-wrap:wrap;gap:10px;}
.room{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--glass);font-size:13.5px;color:var(--text);}
.room i{font-size:17px;color:var(--gold);}

/* specs */
.specs{display:flex;flex-direction:column;}
.specs .row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;
  border-bottom:1px solid var(--line-soft);font-size:14px;}
.specs .row span{color:var(--text-3);flex-shrink:0;}
.specs .row b{color:var(--text);font-weight:600;text-align:right;}
.specs--full{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.specs--full .row{}
.cextra{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-tile);overflow:hidden;
  background:var(--glass);}
.cextra>summary{display:flex;align-items:center;gap:12px;cursor:pointer;padding:16px 20px;list-style:none;
  font-weight:600;font-size:15px;transition:background .25s;}
.cextra>summary::-webkit-details-marker{display:none;}
.cextra>summary:hover{background:var(--glass-2);}
.cextra>summary small{color:var(--text-3);font-weight:500;font-size:12.5px;margin-left:2px;}
.cextra>summary i{margin-left:auto;color:var(--gold);transition:transform .3s var(--ease);}
.cextra[open]>summary i{transform:rotate(180deg);}
.cextra>summary+.specs{padding:4px 20px 18px;}
.cextra[open]>summary{border-bottom:1px solid var(--line-soft);}
.cextra--tech{margin-top:0;}
.cextra--tech>summary{padding:20px 22px;}
.cextra--tech>summary span{font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);font-weight:600;color:var(--text);}

/* benefits */
.benefits{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;}
.benefits li{display:flex;gap:11px;align-items:flex-start;color:var(--text);font-size:15px;line-height:1.5;}
.benefits li i{color:var(--gold);font-size:20px;flex-shrink:0;margin-top:1px;}

/* ---------- palette ---------- */
.cpal__head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;margin-bottom:22px;}
.cpal__head .csec{margin-bottom:8px;border:none;padding-bottom:0;}
.cpal__note{color:var(--text-3);font-size:13.5px;max-width:52ch;}
.cpal__search{position:relative;flex-shrink:0;}
.cpal__search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:16px;}
.cpal__search input{background:var(--glass);border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:12px 18px 12px 40px;color:var(--text);font-family:var(--sans);font-size:14px;width:240px;outline:none;
  transition:border-color .25s;}
.cpal__search input:focus{border-color:var(--gold);}
.cpal{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;}
.cpal.is-collapsed{max-height:560px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);
  mask-image:linear-gradient(#000 72%,transparent);}
.sw{border-radius:var(--r-tile);overflow:hidden;border:1px solid var(--line);background:var(--stone);
  transition:transform .35s var(--ease),border-color .35s;}
.sw:hover{transform:translateY(-3px);border-color:rgba(201,169,97,.4);}
.sw img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.sw figcaption{padding:9px 10px 10px;font-size:11.5px;color:var(--text-2);line-height:1.25;
  border-top:1px solid var(--line-soft);}
.cpal__more{display:flex;justify-content:center;margin-top:22px;}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .cgrid{grid-template-columns:1fr;}
  .cblock--card{position:static;}
}
@media(max-width:860px){
  .catalog-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto;}
  .chero{grid-template-columns:1fr;}
  .chero__media{max-width:none;margin:0;}
  .chero__body{text-align:left;}
  .benefits{grid-template-columns:1fr;}
  .specs--full{grid-template-columns:1fr;gap:0;}
  .cpal__head{flex-direction:column;align-items:stretch;}
  .cpal__search input{width:100%;}
  .cpal{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:11px;}
}

/* ---------- packaging table + CTA match list (2026-07-12 rev) ---------- */
.packs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.packs{width:100%;border-collapse:collapse;font-size:15px;min-width:340px;}
.packs th,.packs td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-soft);}
.packs th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);font-weight:600;}
.packs td{color:var(--text);}
.packs td:first-child{font-weight:600;white-space:nowrap;}
.packs td.price{color:var(--gold-bright);font-weight:600;white-space:nowrap;}
.packs tbody tr:last-child td{border-bottom:none;}
.packs tbody tr{transition:background .2s;}
.packs tbody tr:hover{background:var(--glass);}

.chero__use{margin-top:28px;}
.chero__use .csub{margin-top:0;margin-bottom:12px;}

.match{list-style:none;display:flex;flex-direction:column;gap:13px;margin:22px 0 28px;}
.match li{display:flex;gap:12px;align-items:center;font-size:16px;color:var(--text);}
.match li i{color:var(--gold);font-size:21px;flex-shrink:0;}
.ctaband__info .info-row i{font-size:22px;}

/* ---------- 2026-07-12 rev2: solo CTA, warranty highlight, swatch lightbox ---------- */
.ctaband__card--solo{display:block;text-align:left;}
.ctaband__card--solo h2{max-width:22ch;}
.ctaband__card--solo .btn{white-space:normal;text-align:center;line-height:1.25;}
.benefits li.b-warr span{color:var(--gold-bright);font-weight:700;}
.benefits li.b-warr i{color:var(--gold-bright);}

.sw{cursor:pointer;}
.sw-lb{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(6,8,12,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:24px;}
.sw-lb.open{display:flex;}
.sw-lb figure{max-width:min(92vw,620px);text-align:center;}
.sw-lb img{width:100%;max-height:76vh;object-fit:contain;border-radius:var(--r-tile);
  border:1px solid var(--line-strong);box-shadow:0 30px 80px rgba(0,0,0,.6);}
.sw-lb figcaption{margin-top:16px;color:var(--text);font-size:16px;font-weight:600;}
.sw-lb__close{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:50%;
  background:var(--glass-2);border:1px solid var(--line-strong);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sw-lb__close i{font-size:22px;}

/* ---------- cost calculator (2026-07-14) ---------- */
.ccalc{background:linear-gradient(152deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px 26px;}
.ccalc .csub{color:var(--gold);}
.ccalc__grid{display:grid;grid-template-columns:1fr 1.5fr;gap:20px 28px;margin-bottom:22px;}
.ccalc__grid--single{grid-template-columns:1fr;}
.ccalc__field{display:flex;flex-direction:column;gap:11px;}
.ccalc__field>span{font-size:13px;color:var(--text-3);font-weight:600;}
.ccalc__inp{position:relative;display:flex;align-items:center;}
.ccalc__inp input{width:100%;background:var(--glass);border:1px solid var(--line-strong);border-radius:var(--r-tile);
  padding:14px 48px 14px 16px;color:var(--text);font-size:16px;font-weight:600;font-family:inherit;
  outline:none;transition:border-color .2s;-moz-appearance:textfield;}
.ccalc__inp input::-webkit-outer-spin-button,.ccalc__inp input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.ccalc__inp input:focus{border-color:var(--gold);}
.ccalc__inp input.err{border-color:#c96b5a;}
.ccalc__inp em{position:absolute;right:16px;color:var(--text-3);font-style:normal;font-size:14px;pointer-events:none;}
.ccalc__seg{display:flex;gap:8px;}
.ccalc__seg button{flex:1;min-width:0;background:var(--glass);border:1px solid var(--line-strong);border-radius:var(--r-tile);
  padding:13px 10px;color:var(--text-2);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;line-height:1.25;}
.ccalc__seg button:hover{color:var(--text);}
.ccalc__seg button.is-on{border-color:var(--gold);color:var(--gold-bright);background:rgba(201,169,97,.1);}
.ccalc__run{margin-bottom:0;}
.ccalc__out{margin-top:24px;}
.ccalc__row{display:flex;justify-content:space-between;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--line-soft);font-size:14.5px;}
.ccalc__row span{color:var(--text-2);}
.ccalc__row small{color:var(--text-3);font-size:12.5px;margin-left:2px;}
.ccalc__row b{color:var(--text);font-weight:600;white-space:nowrap;}
.ccalc__row i{font-style:italic;color:var(--gold);font-weight:500;}
.ccalc__total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.ccalc__total span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;}
.ccalc__total b{font-family:var(--serif);font-size:clamp(28px,5vw,36px);color:var(--gold-bright);font-weight:600;white-space:nowrap;}
.ccalc__total b small{font-family:inherit;font-size:.5em;color:var(--text-3);font-weight:500;}
.ccalc__perm{text-align:right;color:var(--text-3);font-size:13px;margin-top:3px;}
.ccalc__wa{margin-top:18px;color:var(--gold-bright);}
.ccalc__wa i{font-size:19px;}
@media(max-width:640px){
  .ccalc{padding:24px 18px;}
  .ccalc__grid{grid-template-columns:1fr;gap:18px;}
  .ccalc__seg button{padding:12px 6px;font-size:12.5px;}
}

/* ---- catalog category filter ---- */
.cfilter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;}
.cfilter__btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-pill);
  color:#e6e6ea;font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:11px 26px;cursor:pointer;transition:border-color .2s,color .2s,background .2s;}
.cfilter__btn:hover{color:#fff;border-color:rgba(201,169,97,.7);background:rgba(255,255,255,.1);}
.cfilter__btn.is-active{border-color:var(--gold);color:var(--gold-bright);background:rgba(201,169,97,.16);}
@media(max-width:640px){.cfilter{gap:8px;margin-bottom:22px;}.cfilter__btn{padding:9px 17px;font-size:13px;}}

/* ============ Pratta Dubai additions ============ */
/* nav CTA (single WhatsApp button on the right) */
.nav__cta{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; font-size:14px; }
.nav__cta i{ font-size:16px; }
@media (max-width:560px){ .nav__cta span{ } .nav__links{ display:none; } }

/* two per-m² rates in the product hero */
.cprice{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.cprice__item{ padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--glass); display:flex; flex-direction:column; gap:4px; }
.cprice__item--hl{ border-color:color-mix(in srgb, var(--gold) 55%, transparent);
  background:color-mix(in srgb, var(--gold) 10%, transparent); }
.cprice__lbl{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text-3); }
.cprice__val{ font-family:var(--serif); font-size:26px; line-height:1; color:var(--text); font-weight:600; }
.cprice__item--hl .cprice__val{ color:var(--gold-bright); }
.cprice__val em{ font-family:var(--sans); font-style:normal; font-size:12.5px; color:var(--text-3); margin-left:4px; letter-spacing:.02em; }
.cprice__item small{ font-size:12px; color:var(--text-2); }
@media (max-width:400px){ .cprice__val{ font-size:22px; } }

/* price chip on overview cards */
.ccard__price{ display:inline-flex; align-items:center; align-self:flex-start; gap:6px;
  margin:2px 0 2px; padding:5px 11px; border-radius:var(--r-pill);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background:color-mix(in srgb, var(--gold) 9%, transparent);
  color:var(--gold-bright); font-size:12.5px; font-weight:600; letter-spacing:.01em; }

/* packaging note under the table */
.packs-note{ margin-top:10px; font-size:12.5px; color:var(--text-3); letter-spacing:.01em; }

/* single flat price (paints) */
.cprice--flat{ grid-template-columns:1fr; max-width:340px; }