/* ============================================================
   FILUM ARTS — collection, product, gift, parts & about pages
   Loaded after styles.css
   ============================================================ */

/* ---------- INTRO ROW ---------- */
.coll-intro { max-width: 760px; }
.coll-intro .lead { margin-top: var(--s4); }

/* ---------- PRODUCT GRID ---------- */
.prod-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.prod-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
@media (max-width: 900px) { .prod-grid, .prod-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .prod-grid, .prod-grid.cols-2 { grid-template-columns: 1fr; } }

.prod-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--med) var(--ease), box-shadow var(--med); display: flex; flex-direction: column; }
.prod-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.prod-media { aspect-ratio: 4/3; position: relative; overflow: hidden; }
.prod-media .ph { width: 100%; height: 100%; transition: transform var(--slow) var(--ease); }
.prod-card:hover .prod-media .ph { transform: scale(1.05); }
.prod-flag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--label); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(58,36,24,.88); color: var(--brass-light); backdrop-filter: blur(4px); }
.prod-body { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.prod-cat { font-family: var(--label); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-deep); }
.prod-body h3 { font-size: 1.3rem; margin-top: 6px; }
.prod-body p { font-size: .9rem; color: var(--ink-soft); margin-top: var(--s3); flex: 1; }
.prod-foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.prod-price { font-family: var(--display); font-size: 1.3rem; color: var(--espresso); }
.prod-price small { font-family: var(--label); font-size: .72rem; color: var(--ink-faint); display: block; letter-spacing: .04em; }
.prod-foot .text-link { font-size: .82rem; }

/* ---------- INFO / GUIDE STRIP ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); margin-top: var(--s8); }
.guide-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s6); }
.guide-card .g-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--ivory); display: grid; place-items: center; color: var(--brass-deep); margin-bottom: var(--s4); }
.guide-card .g-ico svg { width: 22px; height: 22px; }
.guide-card h4 { color: var(--espresso); }
.guide-card p { font-size: .9rem; color: var(--ink-soft); margin-top: var(--s3); }
@media (max-width: 880px) { .guide-grid { grid-template-columns: 1fr; } }

/* ---------- SIZE GUIDE TABLE ---------- */
.size-table { width: 100%; border-collapse: collapse; margin-top: var(--s6); background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--sh-1); }
.size-table th, .size-table td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.size-table th { font-family: var(--label); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-deep); background: var(--ivory); }
.size-table tr:last-child td { border-bottom: none; }
.size-table td:first-child { font-weight: 600; color: var(--espresso); }

/* ---------- GIFT FINDER ---------- */
.gift-finder { display: grid; grid-template-columns: repeat(5,1fr); gap: var(--s4); margin-top: var(--s7); }
.gf-card { text-align: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5) var(--s4); transition: transform var(--med) var(--ease), box-shadow var(--med), border-color var(--fast); }
.gf-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: var(--brass); }
.gf-card .gf-ico { width: 52px; height: 52px; margin: 0 auto var(--s4); border-radius: 50%; background: var(--ivory); display: grid; place-items: center; color: var(--brass-deep); }
.gf-card .gf-ico svg { width: 26px; height: 26px; }
.gf-card h4 { font-size: 1.1rem; color: var(--espresso); }
.gf-card p { font-size: .82rem; color: var(--ink-soft); margin-top: 6px; }
@media (max-width: 900px) { .gift-finder { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .gift-finder { grid-template-columns: 1fr; } }

/* ---------- COMPATIBILITY / PARTS ---------- */
.parts-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s4); margin-top: var(--s7); }
.part-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); text-align: center; transition: transform var(--med) var(--ease), box-shadow var(--med); }
.part-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.part-card .p-ico { width: 40px; height: 40px; margin: 0 auto var(--s3); color: var(--brass-deep); }
.part-card h4 { font-size: 1rem; color: var(--espresso); }
.part-card .p-price { font-family: var(--label); font-weight: 600; font-size: .85rem; color: var(--brass-deep); margin-top: 6px; }
@media (max-width: 880px) { .parts-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- VALUES / ABOUT ---------- */
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); margin-top: var(--s8); }
.value-card { padding: var(--s6); border-left: 2px solid var(--brass); }
.value-card .v-num { font-family: var(--display); font-size: 1.6rem; color: var(--brass); }
.value-card h4 { color: var(--espresso); margin-top: var(--s2); }
.value-card p { font-size: .92rem; color: var(--ink-soft); margin-top: var(--s3); }
.bg-espresso .value-card h4 { color: #fff; }
.bg-espresso .value-card p { color: var(--on-dark); }
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }

/* ---------- CTA STRIP ---------- */
.cta-strip { text-align: center; }
.cta-strip .lead { margin: var(--s4) auto var(--s6); color: var(--on-dark); }
.cta-strip .hero-cta { justify-content: center; }