/* ==========================================================================
   Amercook homepage modules
   --------------------------------------------------------------------------
   Brand palette (from the Amercook brand book):
     gold    #DEB98A  (dominant brand colour)   cream  #FCE7C8 / #ECDDC4
     navy    #090E29  (brand dark)              blue   #192F59
     orange  #EE8118  (accent)                  brown  #C59569 / #A0764C
   Brand font:
     Outfit (Light 300 / Regular 400 / Medium 500 / Bold 700) - declared below
     so the modules never pick up the theme's heading font.
   Framework alignment:
     - Width: theme container class .container (max-width 1860px)
     - Font : brand font declared below, sizes in em (follow the site base size)
   Banner image -> .ac-hero-bg background-image (swap the URL below).
   ========================================================================== */

.ac-hero, .ac-facts, #ac-collections, .ac-bs, #ac-close {
  --ac-navy: #090E29;
  --ac-blue: #192F59;
  --ac-gold: #DEB98A;
  --ac-gold-dk: #C59569;
  --ac-brown: #A0764C;
  --ac-cream: #FCE7C8;
  --ac-cream-2: #ECDDC4;
  --ac-cream-3: #F7EFE1;
  --ac-orange: #EE8118;
  --ac-line: #E6D2AF;
  --ac-muted: #7C6A50;
}

/* ---------- brand font (one declaration for every module) ---------- */
.ac-hero, .ac-hero *, .ac-facts, .ac-facts *, #ac-collections, #ac-collections *, .ac-bs, .ac-bs *, #ac-close, #ac-close * {
  font-family: 'Outfit', 'NeverMind-Regular', 'Poppins', Arial, Helvetica, sans-serif;
}

/* ---------- clear the theme's bootstrap clearfix pseudos ----------
   .container:before/:after are display:table in this theme; inside a grid or
   flex wrapper they are counted as items and shift every child by one cell. */
.ac-wrap:before, .ac-wrap:after { content: none !important; display: none !important; }

/* ---- framework wrapper: .container + 15px gutter (same as the theme cols) ---- */
.ac-wrap { padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box; }
.ac-eyebrow { display: block; font-size: .78em; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ac-orange); }

/* ---------- Hero (full-bleed big image, brand gold) ---------- */
.ac-hero { position: relative; overflow: hidden; background: var(--ac-gold); min-height: 620px; display: flex; align-items: center; }
.ac-hero-bg {
  position: absolute; top: -8%; right: -4%; height: 116%; width: 56%;
  background-image: url('https://oss-us.xorder.com/globale/image/US_Los_Angeles/4298/oss/mcp/2026-09-11/Aristo-pro-AP0524-24cm-Casserole-Wlid-TRI-PLY-SS.jpg?x-oss-process=image/resize,w_1400');
  background-repeat: no-repeat; background-position: right center; background-size: contain;
  mix-blend-mode: multiply; pointer-events: none;
}
.ac-hero-fg {
  position: absolute; z-index: 2; right: 8%; bottom: 5%; width: 25%; height: 46%;
  background-image: url('https://oss-us.xorder.com/globale/image/US_Los_Angeles/4298/oss/mcp/2026-09-11/Aristo-pro-AP0124-1-24cm-Fry-pan-TRI-PLY-SS.jpg?x-oss-process=image/resize,w_600');
  background-repeat: no-repeat; background-position: center bottom; background-size: contain;
  mix-blend-mode: multiply; pointer-events: none;
}
.ac-hero-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, #DEB98A 0%, #DEB98A 34%, rgba(222,185,138,.95) 50%, rgba(222,185,138,.34) 68%, rgba(222,185,138,0) 84%); }
.ac-hero-in { position: relative; z-index: 3; width: 100%; padding-top: 110px; padding-bottom: 110px; }
.ac-copy { max-width: 36em; }
.ac-copy .ac-eyebrow { margin-bottom: 20px; color: var(--ac-navy); }
.ac-h1 { font-size: clamp(2.2em, 4.4vw, 4em); line-height: 1.08; font-weight: 400; color: var(--ac-navy); margin: 0 0 20px; }
.ac-hero p { margin: 0 0 34px; font-size: 1.15em; line-height: 1.75; color: rgba(9,14,41,.75); max-width: 30em; }
.ac-btns { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.ac-btn { display: inline-block; background: var(--ac-navy); color: var(--ac-cream) !important; text-decoration: none !important; padding: 16px 32px; font-size: .78em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; transition: background .25s ease; }
.ac-btn:hover { background: var(--ac-orange); color: #fff !important; }
.ac-tlink { font-size: .78em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ac-navy) !important; text-decoration: none !important; border-bottom: 1px solid rgba(9,14,41,.45); padding-bottom: 6px; }
.ac-tlink:hover { color: var(--ac-orange) !important; border-color: var(--ac-orange); }

/* ---------- Facts strip (brand navy band) ---------- */
.ac-facts { background: var(--ac-navy); }
.ac-facts .ac-wrap { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); align-items: start; }
.ac-fact { padding: 26px 26px; border-right: 1px solid rgba(222,185,138,.28); }
.ac-fact:first-child { padding-left: 0; }
.ac-fact:last-child { border-right: 0; }
.ac-fact b { display: block; margin-bottom: 6px; font-size: .95em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-cream); }
.ac-fact span { font-size: 1em; line-height: 1.6; color: rgba(252,231,200,.68); }

/* ---------- Collections ---------- */
#ac-collections { background: #FBF5E9; padding: 80px 0 86px; }
#ac-collections .ac-chead { text-align: center; margin-bottom: 44px; }
#ac-collections .ac-eyebrow { margin-bottom: 14px; }
#ac-collections h2 { font-size: clamp(1.8em, 2.8vw, 2.6em); line-height: 1.15; font-weight: 400; color: var(--ac-navy); margin: 0 0 12px; }
#ac-collections .ac-chead p { margin: 0; font-size: 1.1em; line-height: 1.7; color: var(--ac-muted); }
#ac-collections .ac-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
#ac-collections .ac-card { display: block; background: #F4E8D2; border: 1px solid var(--ac-line); padding: 20px 16px 18px; text-align: center; text-decoration: none !important; transition: transform .3s ease, box-shadow .3s ease, background .3s ease; }
#ac-collections .ac-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(9,14,41,.12); background: #fff; }
#ac-collections .ac-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin-bottom: 14px; }
#ac-collections .ac-thumb img { max-width: 100%; max-height: 100%; mix-blend-mode: multiply; }
#ac-collections .ac-name { display: block; font-size: 1.15em; font-weight: 500; line-height: 1.3; color: var(--ac-navy); margin-bottom: 6px; }
#ac-collections .ac-more { display: block; font-size: .72em; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ac-orange); }

/* ---------- Best Sellers / New Arrivals ---------- */
.ac-bs { background: #fff; padding: 74px 0 80px; }
.ac-bs .ac-bs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--ac-line); margin-bottom: 32px; }
.ac-bs .ac-tabs { display: flex; gap: 36px; }
.ac-bs .ac-tab { position: relative; background: none; border: 0; padding: 0 0 15px; margin: 0; cursor: pointer; font-size: clamp(1.4em, 2vw, 2em); font-weight: 500; line-height: 1.1; color: #C3B096; transition: color .25s ease; }
.ac-bs .ac-tab:after { content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px; background: var(--ac-navy); transition: right .3s ease; }
.ac-bs .ac-tab:hover { color: var(--ac-muted); }
.ac-bs .ac-tab.is-on { color: var(--ac-navy); }
.ac-bs .ac-tab.is-on:after { right: 0; }
.ac-bs .ac-arrows { display: flex; gap: 10px; padding-bottom: 12px; }
.ac-bs .ac-arrow { width: 40px; height: 40px; border: 1px solid var(--ac-line); background: #fff; color: var(--ac-navy); border-radius: 50%; cursor: pointer; font-size: 1.2em; line-height: 1; display: flex; align-items: center; justify-content: center; transition: .25s ease; }
.ac-bs .ac-arrow:hover { background: var(--ac-navy); border-color: var(--ac-navy); color: var(--ac-cream); }
.ac-bs .ac-arrow.is-off { opacity: .3; pointer-events: none; }
.ac-bs .ac-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; }
.ac-bs .ac-rail::-webkit-scrollbar { display: none; }
.ac-bs .ac-pcard { flex: 0 0 calc((100% - 60px)/4); min-width: 0; display: flex; flex-direction: column; text-decoration: none !important; scroll-snap-align: start; }
.ac-bs .ac-pimg { position: relative; display: flex; align-items: center; justify-content: center; background: var(--ac-cream-3); aspect-ratio: 1 / 1; overflow: hidden; }
.ac-bs .ac-pimg img { max-width: 84%; max-height: 84%; mix-blend-mode: multiply; transition: transform .4s ease; }
.ac-bs .ac-pcard:hover .ac-pimg img { transform: scale(1.045); }
.ac-bs .ac-badge { position: absolute; top: 14px; left: 14px; background: var(--ac-navy); color: var(--ac-cream); font-size: .72em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 7px 11px; }
.ac-bs .ac-badge + .ac-badge { left: auto; right: 14px; }
.ac-bs .ac-badge.k-save { background: var(--ac-orange); color: #fff; }
.ac-bs .ac-badge.k-clay { background: var(--ac-gold-dk); color: #fff; }
.ac-bs .ac-badge.k-gold { background: var(--ac-gold); color: var(--ac-navy); }
.ac-bs .ac-badge.k-olive { background: var(--ac-blue); color: var(--ac-cream); }
.ac-bs .ac-pbody { padding: 16px 2px 0; }
.ac-bs .ac-brand { display: block; font-size: .72em; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ac-orange); margin-bottom: 8px; }
.ac-bs .ac-pname { display: block; font-size: 1.15em; font-weight: 500; line-height: 1.4; color: var(--ac-navy); margin-bottom: 10px; min-height: 2.8em; }
.ac-bs .ac-prow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ac-bs .ac-pprice { font-size: 1.15em; font-weight: 700; color: var(--ac-navy); }
.ac-bs .ac-pprice s { font-weight: 400; font-size: .85em; color: #BCAA8E; margin-right: 8px; }
.ac-bs .ac-pview { font-size: .72em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ac-muted); transition: color .25s ease; }
.ac-bs .ac-pcard:hover .ac-pview { color: var(--ac-orange); }
.ac-bs .ac-empty { padding: 40px 0; color: var(--ac-muted); font-size: 1.1em; }

/* ---------- Closing band (brand gold, bookends the hero) ---------- */
#ac-close { background: var(--ac-gold); padding: 60px 0; text-align: center; }
#ac-close .ac-wrap { max-width: 900px; }
#ac-close .ac-script { font-size: clamp(1.8em, 2.8vw, 2.5em); line-height: 1.25; color: var(--ac-navy); margin: 0 0 14px; }
#ac-close .ac-csub { margin: 0; font-size: 1.05em; line-height: 1.8; color: rgba(9,14,41,.72); }

/* ---------- Responsive (mirrors the theme columns: 4 / 3 / 2) ---------- */
@media (max-width: 1200px) {
  #ac-collections .ac-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .ac-bs .ac-pcard { flex: 0 0 calc((100% - 40px)/3); }
}
@media (max-width: 900px) {
  .ac-hero { display: block; min-height: 0; }
  .ac-hero-bg { top: auto; bottom: 0; right: -10%; height: 70%; width: 100%; background-position: right bottom; }
  .ac-hero-fg { display: none; }
  .ac-hero-scrim { background: linear-gradient(180deg, rgba(222,185,138,.5) 0%, #DEB98A 52%); }
  .ac-hero-in { padding-top: 50px; padding-bottom: 290px; }
  .ac-facts .ac-wrap { grid-template-columns: 1fr; }
  .ac-fact { padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(222,185,138,.28); }
  .ac-fact:last-child { border-bottom: 0; }
  .ac-fact:first-child { padding-left: 0; }
  #ac-collections .ac-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 767px) {
  .ac-bs { padding: 50px 0 56px; }
  .ac-bs .ac-tabs { gap: 22px; }
  .ac-bs .ac-pcard { flex: 0 0 calc((100% - 20px)/2); }
  .ac-bs .ac-arrows { display: none; }
}
@media (max-width: 560px) {
  #ac-collections { padding: 54px 0 58px; }
  #ac-collections .ac-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  #ac-close { padding: 42px 0; }
}