/* Root layout wrapper for the Accessories page content area. */
.acc-hero { max-width:1100px; margin:4.5rem auto 2.5rem; padding:0 1.25rem 0; }

/* Header container that keeps the Accessories hero content grouped. */
.acc-hero-header { max-width:720px; }

/* Main page title for the Accessories area. */
.acc-hero-title { font-size:clamp(1.9rem,3.1vw,2.5rem); line-height:1.2; margin-bottom:.4rem; }

/* Lead paragraph text explaining what the Accessories page is for. */
.acc-hero-lead { font-size:.96rem; color:var(--fg); margin:.25rem 0; }

/* Secondary note under the lead that emphasizes third-party responsibility. */
.acc-hero-note { font-size:.86rem; color:var(--muted); margin:.5rem 0 0; }

/* Stronger disclaimer line that calls out the non-commission and non-endorsement stance. */
.acc-hero-disclaimer { font-size:.86rem; color:color-mix(in srgb,var(--accent) 70%,var(--fg)); margin:.5rem 0 0; }

/* Inline button styled like a link, used in sentences to trigger the request modal. */
.acc-inline-button { border:none; padding:0; margin:0 .15rem; background:none; font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:.08em; cursor:pointer; }

/* Section wrapper for the card grid of approved accessories. */
.acc-grid-section { max-width:1100px; margin:0 auto 3rem; padding:0 1.25rem 0; }

/* Header area above the accessories grid with title and subtitle. */
.acc-grid-header { margin-bottom:.75rem; }

/* Title for the approved accessory websites list. */
.acc-grid-title { font-size:1.15rem; font-weight:600; margin-bottom:.2rem; }

/* Subtitle under the accessories grid title describing behavior of links. */
.acc-grid-subtitle { font-size:.9rem; color:var(--muted); }

/* Responsive grid that lays out accessory cards. */
.acc-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }

/* Base card container for each accessory listing. */
.acc-card { border-radius:.9rem; border:1px solid var(--border); background:var(--surface); overflow:hidden; display:flex; flex-direction:column; }

/* Variant of the accessory card used for the empty state message. */
.acc-card-empty { justify-content:center; }

/* Inner wrapper for the empty card content to keep text centered nicely. */
.acc-card-empty-inner { padding:1.1rem 1.1rem 1.15rem; }

/* Banner area at the top of an accessory card used for the submitted image. */
.acc-card-banner { width:100%; aspect-ratio:16/6; overflow:hidden; background:var(--bg-elevated, #000); }

/* Banner image scaled to cover the banner area while preserving aspect. */
.acc-card-banner-img { width:100%; height:100%; object-fit:cover; display:block; }

/* Body area of an accessory card with text and link. */
.acc-card-body { padding:.7rem .85rem .85rem; display:flex; flex-direction:column; gap:.25rem; }

/* Title of the accessory listing inside the card body. */
.acc-card-title { font-size:1.02rem; font-weight:600; margin:0 0 .05rem; }

/* Owner line showing who submitted the accessory. */
.acc-card-owner { font-size:.82rem; color:var(--muted); margin:0; }

/* Generic owner style used when no specific name is provided. */
.acc-card-owner-generic { font-style:italic; }

/* Description text explaining what the accessory website offers. */
.acc-card-description { font-size:.9rem; color:var(--fg); margin:.25rem 0 .15rem; }

/* Wrapper paragraph around the external link inside the card. */
.acc-card-link { margin:.2rem 0 0; }

/* Anchor element styled as the main call-to-action to visit the external site. */
.acc-card-link-anchor { font-size:.9rem; font-weight:500; color:var(--accent); text-decoration:underline; text-underline-offset:.12em; }

/* Meta line under the link clarifying that it opens in a new tab. */
.acc-card-meta { font-size:.78rem; color:var(--muted); margin:.15rem 0 0; }

/* Full-screen overlay container for the accessory request modal. */
.acc-request-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; z-index:40; }

/* Hidden state for the accessory request modal when JS toggles it off. */
.acc-request-modal[hidden] { display:none; }

/* Semi-transparent backdrop behind the request modal. */
.acc-request-backdrop { position:absolute; inset:0; background:color-mix(in srgb,var(--bg) 65%,transparent); }

/* Inner dialog panel for the accessory request form. */
.acc-request-dialog { position:relative; max-width:520px; width:100%; border-radius:.95rem; border:1px solid var(--border); background:var(--surface); padding:1.05rem 1.15rem 1.1rem; box-shadow:0 18px 45px rgba(0,0,0,.35); }

/* Header section at the top of the accessory request dialog. */
.acc-request-header { margin-bottom:.65rem; }

/* Title text inside the accessory request modal. */
.acc-request-title { font-size:1.08rem; font-weight:600; margin:0 0 .25rem; }

/* Introductory paragraph in the modal explaining how requests are handled. */
.acc-request-intro { font-size:.88rem; color:var(--fg); margin:0; }

/* Form wrapper inside the request dialog holding all fields and actions. */
.acc-request-form { margin-top:.6rem; display:flex; flex-direction:column; gap:.55rem; }

/* Individual field block used for labels and inputs in the request form. */
.acc-request-field { display:flex; flex-direction:column; gap:.2rem; }

/* Label text for fields inside the request form. */
.acc-request-label { font-size:.86rem; font-weight:500; }

/* Base input styling for text, email, URL, and textarea fields. */
.acc-request-input { font-size:.9rem; border-radius:.5rem; border:1px solid var(--border); padding:.34rem .5rem; background:var(--surface); color:var(--fg); }

/* Multiline variant of the request form input for the description. */
.acc-request-input-multiline { min-height:4rem; resize:vertical; }

/* Helper note at the bottom of the request form describing safe-use guidelines. */
.acc-request-note { font-size:.78rem; color:var(--muted); margin:.05rem 0 0; }

/* Container for Cancel and Submit buttons in the request dialog. */
.acc-request-actions { margin-top:.35rem; display:flex; justify-content:flex-end; gap:.35rem; }

/* Base button styling for actions in the request dialog. */
.acc-request-button { padding:.32rem .8rem; font-size:.86rem; border-radius:.65rem; border:1px solid var(--border); cursor:pointer; }

/* Secondary button style for the Cancel action in the request modal. */
.acc-request-button-secondary { background:transparent; color:var(--fg); }

/* Primary button style for submitting the accessory request. */
.acc-request-button-primary { background:color-mix(in srgb,var(--accent) 18%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 70%,var(--border)); color:color-mix(in srgb,var(--accent) 85%,var(--fg)); }

/* Responsive rule that slightly tightens vertical spacing on smaller screens. */
@media (max-width:720px){ .acc-hero { margin:4rem auto 2.3rem; padding:0 .9rem 0; } }

/* Responsive rule that reduces Accessories grid side padding on narrow devices. */
@media (max-width:720px){ .acc-grid-section { padding:0 .9rem 0; } }

/* Responsive rule that stacks the Accessories cards more comfortably on very small screens. */
@media (max-width:500px){ .acc-card-grid { grid-template-columns:minmax(0,1fr); } }